@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --inchiostro: #12161B;
  --inchiostro-chiaro: #232A35;
  --bordeaux: #A9762F;
  --bordeaux-scuro: #8A6224;
  --lana: #ECE7DB;
  --lana-bordo: #DDD6C4;
  --carta: #F4F2EC;
  --testo: #161A1F;
  --testo-secondario: #3A4048;
  --riga: #E4DED0;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--carta); color: var(--testo);
  font-family: 'IBM Plex Sans', -apple-system, Segoe UI, Roboto, sans-serif; font-size: 14.5px;
}
h1, h2, h3, .serif { font-family: 'Fraunces', Georgia, serif; }

a { color: var(--bordeaux-scuro); }

/* ---------- guscio a sidebar ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px; background: var(--inchiostro); color: #E9EDF5; flex-shrink: 0;
  padding: 28px 0; display: flex; flex-direction: column;
}
.sidebar .marchio { padding: 0 24px 28px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 20px; text-decoration: none; display: block; }
.sidebar .marchio .nome { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; letter-spacing: .2px; color: #fff; }
.sidebar .marchio .sotto { font-size: 12px; color: #A9B4C9; margin-top: 3px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; flex: 1; overflow-y: auto; }
.sidebar nav .sezione-nav { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #7E8AA3; padding: 16px 12px 6px; }
.sidebar nav a {
  color: #CBD3E3; text-decoration: none; padding: 9px 12px; border-radius: 6px; font-size: 13.5px;
}
.sidebar nav a.attivo { background: rgba(255,255,255,.1); color: #fff; font-weight: 500; }
.sidebar nav a:hover:not(.attivo) { background: rgba(255,255,255,.05); }
/* Su desktop questa riga (Profilo/Sito pubblico/Esci) non si vede piu': ha preso il
   suo posto la .barra-superiore fissa in alto a destra, fuori dalla sidebar. Resta
   nel markup e riappare solo nel cassetto mobile (vedi il breakpoint piu' in basso),
   dove la barra superiore desktop non esiste e serve un modo per raggiungerle. */
.sidebar .utente { margin-top: auto; padding: 16px 24px 0; border-top: 1px solid rgba(255,255,255,.12); display: none; justify-content: space-between; align-items: center; }
.sidebar .utente .chi { font-size: 13px; font-weight: 500; color: #E9EDF5; }
.sidebar .utente .utente-azioni { display: flex; gap: 12px; }
.sidebar .utente .esci { font-size: 12px; color: #A9B4C9; text-decoration: none; }
.sidebar .utente .esci:hover { color: #fff; }

/* Da desktop la sidebar resta "incollata" mentre si scorre il contenuto, invece di
   scorrere via con la pagina (era un flex item "stretch" alto quanto tutta la colonna
   di contenuto, col menu fisso in cima a quell'altezza enorme: su pagine lunghe come
   calendario.php bastava scendere di una schermata perche' sparisse dalla vista).
   align-self:flex-start toglie lo stretch verticale del flex, height:100vh la
   contiene nel viewport, position:sticky la aggancia durante lo scroll; se le voci
   fossero piu' di quante ce ne stanno, il .sidebar nav (overflow-y:auto, riga sopra)
   scorre gia' per conto suo. Sotto i 900px resta il cassetto esistente (vedi il
   @media piu' in basso, che ridichiara .sidebar con position:fixed). */
@media (min-width: 901px) {
  .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; }
}

/* ---------- avatar (guscio, profilo, bacheca) ---------- */
.avatar-cerchio {
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; color: #fff; letter-spacing: .02em;
}
.utente-riga { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.utente-riga .chi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-topbar { margin-left: auto; display: flex; }
input:disabled { background: var(--lana); color: var(--testo-secondario); }

.area-principale { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Barra fissa in alto (solo desktop — sotto i 900px c'e' gia' la barra-mobile con
   l'hamburger, non serve raddoppiarla): a sinistra il marchio del minisito corrente
   (solo se ne ha uno, es. SanPaolo1908), a destra avatar/Profilo/Sito pubblico/Esci
   — sempre ancorati a destra con margin-left:auto, marchio presente o no. */
.barra-superiore {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 24px;
  background: #fff; border-bottom: 1px solid var(--riga); padding: 12px 48px;
}
.barra-superiore-marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.barra-superiore-stemma { width: 28px; height: 28px; flex: none; display: block; }
.barra-superiore-nome {
  font-family: 'Big Shoulders Display', sans-serif; font-size: 21px; font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase; color: var(--testo);
}
.barra-superiore-utente { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.barra-superiore-utente .chi { font-size: 13.5px; font-weight: 500; color: var(--testo); }
.barra-superiore-utente .utente-azioni { display: flex; gap: 18px; }
.barra-superiore-utente .utente-azioni a { font-size: 13px; color: var(--testo-secondario); text-decoration: none; }
.barra-superiore-utente .utente-azioni a:hover { color: var(--inchiostro); }

.contenuto { flex: 1; padding: 40px 48px; min-width: 0; }

/* Barra con il pulsante hamburger e velo di sfondo del cassetto: esistono nel
   markup di ogni pagina ma si vedono solo sotto i 900px (vedi in fondo al file). */
.barra-mobile { display: none; }
.velo-menu { display: none; }

.pagina-anonima { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--inchiostro); }

/* ---------- elementi comuni ---------- */
.testata { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; flex-wrap: wrap; gap: 10px; }
.testata h1 { font-size: 24px; font-weight: 600; margin: 0; color: var(--inchiostro); }
.testata .sottotitolo { font-size: 13.5px; color: var(--testo-secondario); margin-top: 4px; }
.badge-girone {
  font-size: 12px; color: var(--bordeaux-scuro); background: var(--lana);
  border: 1px solid var(--lana-bordo); padding: 4px 12px; border-radius: 999px;
}

.contenitore { max-width: 420px; margin: 0 auto; padding: 0 16px; }
.scatola {
  background: #fff; border: 1px solid var(--riga); border-radius: 4px; padding: 28px;
}
h1 { font-size: 20px; margin: 0 0 18px; }
label { display: block; font-size: 13px; color: var(--testo-secondario); margin: 14px 0 5px; }
input[type=email], input[type=password], input[type=text], input[type=datetime-local], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--riga); border-radius: 4px; font-size: 14px;
  font-family: inherit; background: #fff; color: var(--testo);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bordeaux); }

/* Campo password con occhiolino "tieni premuto per vedere": il bottone si
   sovrappone all'input, che a sua volta lascia spazio a destra per non
   finirci sotto il testo digitato. */
.campo-password { position: relative; }
.campo-password input { padding-right: 42px; }
.occhio-password {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; margin: 0; padding: 0; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--testo-secondario); cursor: pointer; border-radius: 4px;
}
.occhio-password:hover { color: var(--inchiostro); background: var(--lana); }
.occhio-password:active { color: var(--bordeaux); background: var(--lana-bordo); }
.occhio-password svg { width: 19px; height: 19px; display: block; pointer-events: none; }

button, .pulsante {
  margin-top: 20px; background: var(--bordeaux); color: #fff; border: none; border-radius: 4px;
  padding: 11px 18px; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block;
  font-family: inherit; font-weight: 500;
}
button:hover, .pulsante:hover { background: var(--bordeaux-scuro); }
.pulsante.secondario { background: #fff; color: var(--inchiostro); border: 1px solid var(--riga); }
.pulsante.secondario:hover { background: var(--lana); border-color: var(--lana-bordo); }
.errore { background: #FBEAEA; border: 1px solid #E3B6B6; color: #5E2129; padding: 10px 14px; border-radius: 4px; font-size: 13.5px; margin-bottom: 6px; }
.successo { background: #EAF2E7; border: 1px solid #C0D4B8; color: #33502B; padding: 10px 14px; border-radius: 4px; font-size: 13.5px; margin-bottom: 6px; }
.link-secondario { font-size: 13px; margin-top: 16px; }
.link-secondario a { color: var(--testo-secondario); }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--riga); font-size: 13.5px; }
th { color: var(--testo-secondario); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.card-minisito {
  display: block; background: #fff; border: 1px solid var(--riga); border-radius: 4px;
  padding: 20px; margin-bottom: 12px; text-decoration: none; color: var(--testo);
}
.card-minisito:hover { border-color: var(--inchiostro); }
.card-minisito .nome { font-size: 16px; font-weight: 600; font-family: 'Fraunces', serif; color: var(--inchiostro); }
.checkbox-riga { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13.5px; }
.checkbox-riga input { width: auto; accent-color: var(--bordeaux); }

/* ---------- SanPaolo1908 ---------- */
.griglia { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 820px) { .griglia { grid-template-columns: 1fr; } }

.hero-trasferta {
  background: var(--inchiostro); color: #fff; border-radius: 4px; padding: 28px 30px;
  position: relative; overflow: hidden;
}
.hero-trasferta .etichetta { font-size: 11.5px; letter-spacing: .4px; color: #A9B4C9; text-transform: uppercase; }
.hero-trasferta h2 { font-size: 26px; margin: 8px 0 4px; font-weight: 600; }
.hero-trasferta .quando { font-size: 13.5px; color: #C7CEDD; }
.hero-trasferta .righe { display: flex; gap: 28px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); flex-wrap: wrap; }
.hero-trasferta .dato .num { font-size: 19px; font-weight: 600; font-family: 'Fraunces', serif; }
.hero-trasferta .dato .lbl { font-size: 11.5px; color: #A9B4C9; margin-top: 2px; }
.hero-trasferta .azione {
  display: inline-block; margin-top: 20px; background: var(--bordeaux); color: #fff;
  padding: 9px 18px; border-radius: 4px; font-size: 13px; font-weight: 500; text-decoration: none;
}
.hero-trasferta .azione:hover { background: var(--bordeaux-scuro); }

.striscia-casa {
  display: flex; justify-content: space-between; align-items: center; background: var(--lana);
  border: 1px solid var(--lana-bordo); border-radius: 4px; padding: 14px 20px; margin-bottom: 20px; font-size: 13.5px;
  flex-wrap: wrap; gap: 8px;
}
.striscia-casa .etichetta { color: var(--bordeaux-scuro); font-weight: 500; margin-right: 10px; }

#mappa-trasferte { height: 320px; border-radius: 4px; overflow: hidden; border: 1px solid var(--riga); margin-bottom: 20px; }
#mappa { height: 100%; min-height: 220px; border-radius: 4px; overflow: hidden; border: 1px solid var(--riga); }

.sotto-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.sotto-nav a {
  border: 1px solid var(--riga); background: #fff; color: var(--testo-secondario); padding: 7px 13px;
  border-radius: 999px; font-size: 13px; text-decoration: none;
}
.sotto-nav a.attivo { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.riga-prato { background: var(--lana); font-weight: 600; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge.programmata { background: #EEF0F3; color: var(--testo-secondario); }
.badge.in_corso { background: #FBF0D9; color: #8C6B1F; }
.badge.terminata { background: #EAF2E7; color: #33502B; }
.badge.rinviata { background: #FBEAEA; color: #5E2129; }
.riepilogo-partita { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.riepilogo-partita .squadre { font-size: 15px; font-weight: 600; }
.riepilogo-partita .quando { font-size: 12.5px; color: var(--testo-secondario); }
.box-trasferta {
  background: var(--lana); border: 1px solid var(--lana-bordo); border-radius: 4px; padding: 16px; margin-top: 14px;
}
.box-trasferta h3 { margin: 0 0 8px; font-size: 14px; color: var(--inchiostro); }
.elenco-presenze { list-style: none; padding: 0; margin: 8px 0 0; }
.elenco-presenze li { padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid var(--lana-bordo); }
.avviso { background: var(--lana); border: 1px solid var(--lana-bordo); color: var(--testo-secondario); padding: 10px 14px; border-radius: 4px; font-size: 13px; margin-bottom: 14px; }

.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.checklist li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--riga); font-size: 13.5px; }
.checklist li:last-child { border-bottom: none; }
.checklist input { accent-color: var(--bordeaux); width: 15px; height: 15px; }
.checklist li.fatto span { color: var(--testo-secondario); text-decoration: line-through; }

.rosa { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 4px; }
.giocatore { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--riga); border-radius: 4px; }
.giocatore .numero {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; color: var(--bordeaux);
  width: 28px; text-align: center; flex-shrink: 0;
}
.giocatore .nome { font-size: 13px; }
.giocatore .ruolo { font-size: 11px; color: var(--testo-secondario); }

.distanza { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--testo-secondario); margin-top: 10px; }
.distanza strong { color: var(--testo); }

.scatola-larga { background: #fff; border: 1px solid var(--riga); border-radius: 4px; padding: 22px 24px; }
.scatola-larga h1 { font-size: 14.5px; font-weight: 600; margin: 0 0 14px; color: var(--inchiostro); }

/* ---------- Radici ---------- */
.card-ramo {
  background: #fff; border: 1px solid var(--riga); border-radius: 4px; padding: 18px 20px;
  margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
  text-decoration: none; color: var(--testo);
}
.card-ramo:hover { border-color: var(--inchiostro); }
.card-ramo .nome-ramo { font-family: 'Fraunces', serif; font-size: 16px; color: var(--inchiostro); }
.card-ramo .dinastia { color: var(--bordeaux); }

.selettore-vista { display: inline-flex; gap: 4px; background: var(--lana); border: 1px solid var(--lana-bordo); border-radius: 999px; padding: 3px; margin-bottom: 18px; }
.selettore-vista button { margin: 0; background: transparent; color: var(--testo-secondario); border: none; border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 500; cursor: pointer; }
.selettore-vista button.attivo { background: #fff; color: var(--inchiostro); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.selettore-vista button:hover:not(.attivo) { color: var(--inchiostro); background: transparent; }

.griglia-persone { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.card-persona {
  display: block; background: #fff; border: 1px solid var(--riga); border-radius: 4px;
  padding: 14px 16px; text-decoration: none; color: var(--testo);
}
.card-persona:hover { border-color: var(--inchiostro); }
.card-persona .nome-persona { font-family: 'Fraunces', serif; font-size: 14.5px; font-weight: 600; color: var(--inchiostro); }
.date-persona { display: flex; gap: 12px; margin-top: 5px; }
.date-persona .voce-data { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--testo-secondario); }
.date-persona .simbolo { color: var(--bordeaux); font-weight: 600; font-size: 12.5px; line-height: 1; }

.griglia-rami { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card-ramo-badge {
  display: block; background: #fff; border: 1px solid var(--riga); border-radius: 4px;
  padding: 22px 20px; text-decoration: none; color: var(--testo);
}
.card-ramo-badge:hover { border-color: var(--inchiostro); }
.card-ramo-badge .nome-ramo { font-family: 'Fraunces', serif; font-size: 17px; color: var(--inchiostro); }
.card-ramo-badge .dinastia { color: var(--bordeaux); }
.card-ramo-badge .conteggio { font-size: 12.5px; color: var(--testo-secondario); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pulsanti-icona { display: flex; gap: 6px; flex-shrink: 0; }
.pulsante-icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 0; padding: 0; border-radius: 6px;
  background: var(--lana); border: 1px solid var(--lana-bordo); color: var(--inchiostro);
  text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.pulsante-icona:hover { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.pulsante-icona.modifica:hover { background: var(--bordeaux); border-color: var(--bordeaux); }
.pulsante-icona svg { display: block; }

.griglia-rami-azioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card-ramo-azioni { background: #fff; border: 1px solid var(--riga); border-radius: 4px; padding: 16px 18px; }
.card-ramo-azioni .riga-ramo-azioni { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-ramo-azioni .nome-ramo { font-family: 'Fraunces', serif; font-size: 15.5px; color: var(--inchiostro); }
.card-ramo-azioni .conteggio { font-size: 12.5px; color: var(--testo-secondario); margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nota-cognome { font-size: 11.5px; color: var(--testo-secondario); margin-top: 4px; }

.registro-modifiche { display: flex; flex-direction: column; }
.voce-registro { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--riga); flex-wrap: wrap; }
.voce-registro:last-child { border-bottom: none; }
.voce-registro .dettaglio-registro { flex: 1; min-width: 220px; font-size: 13.5px; }
.voce-registro .dettaglio-registro a { color: var(--inchiostro); font-weight: 600; text-decoration: none; }
.voce-registro .dettaglio-registro a:hover { text-decoration: underline; }
.voce-registro .campo-registro { display: block; font-size: 12px; color: var(--testo-secondario); margin-top: 2px; }
.voce-registro .meta-registro { font-size: 12px; color: var(--testo-secondario); white-space: nowrap; }
.badge.creazione { background: #EAF2E7; color: #33502B; }
.badge.modifica { background: #EAF1FB; color: #2D5C99; }
.badge.richiesta_cancellazione { background: #FBF0D9; color: #8C6B1F; }
.badge.cancellazione { background: #FBEAEA; color: #5E2129; }
.badge.lettura { background: #EEF0F3; color: var(--testo-secondario); font-weight: 500; }
.badge.incompleto { background: #FBF0D9; color: #8C6B1F; }

/* ================================================================
   SanPaolo1908 — stile "Trasferte Biancazzurre" originale, portato
   dentro al portale identico a com'era sulla pagina storica.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

.trasferte-legacy {
  --wool:#F4EFE4; --wool-deep:#EAE2D2; --ink:#20293A;
  --cornflower:#0066cc; --cornflower-light:#7EB8F2;
  --thread:#B6402A; --loden:#54704E; --loom-line:#C9BFA6; --card:#FBF9F3;
  --radius:14px; --shadow:0 1px 0 rgba(32,41,58,.05), 0 8px 20px -12px rgba(32,41,58,.35);
  background: repeating-linear-gradient(135deg, rgba(32,41,58,.02) 0 2px, transparent 2px 6px), var(--wool);
  color: var(--ink); font-family:'IBM Plex Sans',system-ui,sans-serif;
  margin: -40px -48px; padding: 28px 40px 60px;
}
.trasferte-legacy h1.tl-title{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(28px,5vw,40px);
  line-height:.92; letter-spacing:.01em; margin:0; color:var(--ink);
}
.trasferte-legacy h1.tl-title em{ font-style:normal; color:var(--thread); }
/* per un titolo-frase lungo (es. "la bacheca dei vecchi ultras lanieri"): la
   dimensione pensata per una singola parola (SANPAOLO1908) sarebbe spropositata. */
.trasferte-legacy h1.tl-title.tl-title-frase{
  font-size:clamp(19px,3.6vw,27px); line-height:1.08; letter-spacing:.005em;
}
.trasferte-legacy .tl-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cornflower); font-weight:500; margin:0 0 4px;
}
.trasferte-legacy .tl-sub{font-size:14px; color:#4B5568; margin:10px 0 20px; line-height:1.5; max-width:640px;}
/* da desktop, meno respiro sopra e sotto la riga dei loghi del titolo (sotto i
   900px restano i valori normali qui sopra, pensati per il layout mobile) */
@media (min-width: 901px) {
  .trasferte-legacy .tl-eyebrow{ margin-bottom: 2px; }
  .trasferte-legacy .tl-sub{ margin-top: 5px; }
}

.trasferte-legacy .nextcard{
  position:relative; margin:0 0 20px; border-radius:0 0 12px 12px;
  background:var(--cornflower); color:#fff; box-shadow:var(--shadow); padding-top:18px;
}
.trasferte-legacy .nextcard-hole{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:13px; height:13px; border-radius:50%; background:var(--wool); border:2px solid var(--cornflower-light);
}
.trasferte-legacy .nextcard-perf{ border-top:2px dashed rgba(255,255,255,.35); margin:0 14px; position:relative; top:9px; }
.trasferte-legacy .nextcard-inner{
  padding:18px 20px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.trasferte-legacy .nextcard-label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cornflower-light); margin:0 0 6px;
}
.trasferte-legacy .nextcard-team{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:24px; line-height:1.05; margin:0 0 4px;
}
/* riga "Prato – Avversario" con logo grande davanti a ciascun nome, al posto
   del solo nome dell'avversario: usata sia in dashboard (index.php) sia nel
   ticket "prossima trasferta" di trasferte.php. */
.trasferte-legacy .nextcard-squadre{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 4px;
}
.trasferte-legacy .nextcard-sq{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:22px; line-height:1.05;
}
.trasferte-legacy .nextcard-logo{ width:28px; height:28px; object-fit:contain; flex:none; }
.trasferte-legacy .nextcard-vs{ font-size:14px; font-weight:600; opacity:.75; }
.trasferte-legacy .nextcard-place{font-size:13px; color:#E6EDF8; margin:0 0 8px;}
.trasferte-legacy .nextcard-when{font-size:13px; color:#fff; font-weight:600;}
.trasferte-legacy .nextcard-when b{color:#ffcc00;}
.trasferte-legacy .nextcard-btn{
  flex:none; background:#fff; color:var(--cornflower); border:none; border-radius:20px;
  padding:10px 18px; font:600 13px 'IBM Plex Sans',sans-serif; cursor:pointer; white-space:nowrap; text-decoration:none;
  display:inline-block;
}
.trasferte-legacy .nextcard-btn:hover{background:var(--wool);}

.trasferte-legacy .homecard{
  display:flex; align-items:center; gap:10px; margin:0 0 20px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--loom-line); border-left:4px solid var(--cornflower);
  border-radius:8px; padding:12px 16px; font-size:13px; color:var(--ink);
}
.trasferte-legacy .homecard .hc-icon{font-size:17px; flex:none;}
.trasferte-legacy .homecard b{color:var(--cornflower);}

/* Variante "in casa" della card ticket: stessa identica struttura del
   .nextcard delle trasferte (stesso allineamento, stesso posto per il
   bottone) — cambia solo l'accento di colore, per restare distinguibile
   a colpo d'occhio. */
.trasferte-legacy .nextcard.nextcard-casa{background:var(--loden);}
.trasferte-legacy .nextcard.nextcard-casa .nextcard-hole{border-color:#9FBF95;}
.trasferte-legacy .nextcard.nextcard-casa .nextcard-label{color:#C9E0C0;}
.trasferte-legacy .nextcard.nextcard-casa .nextcard-btn{color:var(--loden);}
.trasferte-legacy .nextcard.nextcard-casa .meteo-badge small{color:#E9F3E5;}

/* Badge meteo dinamico: usato nel .nextcard, sia nella variante trasferta
   sia in quella "in casa", sulla sola prossima partita. */
.trasferte-legacy .meteo-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:28px; line-height:1; flex:none; text-align:center;
}
.trasferte-legacy .meteo-badge small{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; margin-top:4px; font-weight:500;
}
.trasferte-legacy .nextcard .meteo-badge small{color:#E6EDF8;}
.trasferte-legacy .nextcard-finale{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:19px; color:#ffcc00; margin:0;
}

/* Punteggio live nella nextcard, mentre la partita e' in_corso: stesso
   accento giallo del FINALE, con un pallino pulsante a segnalare "in diretta". */
.trasferte-legacy .nextcard-live{
  display:flex; align-items:center; gap:7px;
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:19px; color:#ffcc00; margin:0;
}
.trasferte-legacy .live-dot{
  width:9px; height:9px; border-radius:50%; background:#ffcc00; flex:none;
  animation: nextcard-pulse 1.4s ease-in-out infinite;
}
@keyframes nextcard-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}

.trasferte-legacy .rostercard{
  background:var(--card); border:1px solid var(--loom-line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:26px; overflow:hidden;
}
/* solo la rosa richiudibile della dashboard parte chiusa; la pagina Rosa dedicata resta visibile */
.trasferte-legacy .rostercard.richiudibile{ display:none; }
.trasferte-legacy .rostercard-head{padding:14px 16px 4px;}
.trasferte-legacy .rostercard-head h2{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:19px;
  margin:0; letter-spacing:.02em; text-transform:uppercase;
}
.trasferte-legacy .lookup-box{display:flex; gap:8px; padding:10px 16px 6px;}
.trasferte-legacy .lookup-box input{
  flex:1; border:1px solid var(--loom-line); border-radius:8px; padding:11px 12px;
  font:600 16px 'IBM Plex Mono',monospace; text-align:center; color:var(--ink);
}
.trasferte-legacy .lookup-box button{
  flex:none; background:var(--cornflower); color:#fff; border:none; border-radius:8px;
  padding:0 18px; font:600 13px 'IBM Plex Sans',sans-serif; cursor:pointer;
}
.trasferte-legacy .lookup-result{
  margin:6px 16px 14px; min-height:52px; display:flex; align-items:center; justify-content:center;
  background:var(--wool-deep); border-radius:8px; padding:10px;
}
.trasferte-legacy .lookup-result .lr-empty{font-size:12.5px; color:#6a7386;}
.trasferte-legacy .lookup-result .lr-num{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:20px; color:var(--cornflower); margin-right:10px;
}
.trasferte-legacy .lookup-result .lr-name{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:22px; color:var(--ink);
  text-transform:uppercase; letter-spacing:.02em;
}
.trasferte-legacy .roster-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:1px; background:var(--loom-line); border-top:1px solid var(--loom-line);
}
.trasferte-legacy .roster-grid .rg-item{
  background:var(--card); padding:9px 14px; display:flex; align-items:baseline; gap:9px; font-size:13.5px;
}
.trasferte-legacy .roster-grid .rg-num{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--cornflower); min-width:20px;}
.trasferte-legacy .roster-grid .rg-name{font-weight:500;}

.trasferte-legacy .stats{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0;}
.trasferte-legacy .stat{
  background:var(--card); border:1px solid var(--loom-line); border-radius:10px;
  padding:10px 14px; min-width:118px; flex:1 1 118px;
}
.trasferte-legacy .stat b{
  display:block; font-family:'Big Shoulders Display',sans-serif; font-weight:800;
  font-size:26px; line-height:1; color:var(--cornflower);
}
.trasferte-legacy .stat span{font-size:11.5px; color:#5B6577; text-transform:uppercase; letter-spacing:.06em;}

.trasferte-legacy .mapcard{
  background:var(--card); border:1px solid var(--loom-line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:26px; overflow:hidden;
}
.trasferte-legacy .mapcard-head{
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--loom-line);
}
.trasferte-legacy .mapcard-head h2{font-size:13px; margin:0; letter-spacing:.04em; text-transform:uppercase; font-weight:600;}
.trasferte-legacy #legacy-map{height:300px; width:100%; isolation: isolate;}
.trasferte-legacy .mapcaption{font-size:11.5px; color:#6a7386; padding:8px 14px 12px;}

.trasferte-legacy .region-head{display:flex; align-items:baseline; gap:10px; margin:0 0 12px;}
.trasferte-legacy .region-head h2{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:20px;
  letter-spacing:.03em; text-transform:uppercase; margin:0; color:var(--ink);
}
.trasferte-legacy .region-count{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#6a7386;
  border:1px solid var(--loom-line); border-radius:20px; padding:2px 9px;
}
.trasferte-legacy .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}

.trasferte-legacy .tag{
  position:relative; background:var(--card); border:1px solid var(--loom-line); border-radius:0 0 10px 10px;
  box-shadow:var(--shadow); padding-top:18px;
}
.trasferte-legacy .tag.open{grid-column:1/-1;}
.trasferte-legacy .tag-hole{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%; background:var(--wool); border:2px solid var(--loom-line);
}
.trasferte-legacy .tag-perf{ border-top:2px dashed var(--loom-line); margin:0 12px; position:relative; top:9px; }
.trasferte-legacy .tag-body{padding:16px 16px 14px;}
.trasferte-legacy .tag-front{width:100%; background:none; border:none; text-align:left; padding:0; cursor:pointer; font:inherit; color:inherit;}
.trasferte-legacy .tag-team{
  display:flex; align-items:center; gap:8px;
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:19px; line-height:1.05; letter-spacing:.01em; margin:0 0 3px;
}
.trasferte-legacy .tag-logo{ width:30px; height:30px; object-fit:contain; flex:none; }
.trasferte-legacy .tag-place{font-size:12.5px; color:#4B5568; margin:0 0 4px;}
.trasferte-legacy .tag-date{font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--cornflower); margin:0 0 10px;}
.trasferte-legacy .tag-meta{display:flex; align-items:center; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#6a7386;}
.trasferte-legacy .status{display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Sans',sans-serif; font-size:11.5px; font-weight:500;}
.trasferte-legacy .dot{width:8px; height:8px; border-radius:50%; background:#C9BFA6; flex:none;}
.trasferte-legacy .dot.pronta{background:var(--loden);}
.trasferte-legacy .dot.programma{background:var(--cornflower);}
.trasferte-legacy .chev{margin-left:auto; font-size:16px; color:#8B93A3; transition:transform .15s ease;}
.trasferte-legacy .tag.open .chev{transform:rotate(180deg);}

.trasferte-legacy .detail{display:none; margin-top:14px; padding-top:14px; border-top:1px dashed var(--loom-line);}
.trasferte-legacy .tag.open .detail{display:block;}
.trasferte-legacy .field{margin-bottom:12px;}
.trasferte-legacy .field label{display:block; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#4B5568; margin-bottom:5px;}
.trasferte-legacy .field input[type=text], .trasferte-legacy .field input[type=datetime-local],
.trasferte-legacy .field select, .trasferte-legacy .field textarea{
  width:100%; border:1px solid var(--loom-line); background:#fff; border-radius:8px;
  padding:9px 10px; font:14px/1.4 'IBM Plex Sans',sans-serif; color:var(--ink);
}
.trasferte-legacy .field textarea{resize:vertical; min-height:56px;}
.trasferte-legacy .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:420px){.trasferte-legacy .row2{grid-template-columns:1fr;}}
.trasferte-legacy .chips{display:flex; flex-wrap:wrap; gap:6px;}
.trasferte-legacy .chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--wool-deep);
  border:1px solid var(--loom-line); border-radius:20px; padding:4px 6px 4px 11px; font-size:12.5px;
}
.trasferte-legacy .chip button{background:none; border:none; color:#8B93A3; cursor:pointer; font-size:14px; line-height:1; padding:2px;}
.trasferte-legacy .chip button:hover{color:var(--thread);}
.trasferte-legacy .checklist2{display:flex; flex-direction:column; gap:7px;}
.trasferte-legacy .cl-item{display:flex; align-items:center; gap:9px; font-size:13.5px;}
.trasferte-legacy .cl-item input[type=checkbox]{width:16px; height:16px; accent-color:var(--loden); flex:none;}
.trasferte-legacy .cl-item.custom span.rm{margin-left:auto; cursor:pointer; color:#8B93A3; font-size:13px;}
.trasferte-legacy .cl-item.custom span.rm:hover{color:var(--thread);}
.trasferte-legacy .addcl{display:flex; gap:8px; margin-top:8px;}
.trasferte-legacy .addcl input{flex:1;}
.trasferte-legacy .addcl button{flex:none; background:none; border:1px dashed var(--cornflower); color:var(--cornflower); border-radius:8px; padding:0 12px; font:500 13px 'IBM Plex Sans',sans-serif; cursor:pointer;}
.trasferte-legacy .footer-row{display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:10px; flex-wrap:wrap;}
.trasferte-legacy .maplink{font-size:12.5px; color:var(--cornflower); text-decoration:none; font-weight:500;}
.trasferte-legacy .maplink:hover{text-decoration:underline;}
.trasferte-legacy footer.tl-foot{margin-top:30px; font-size:11.5px; color:#7a8296; text-align:center; line-height:1.6;}

.trasferte-legacy .linkrow{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 20px;}
.trasferte-legacy .linkrow a, .trasferte-legacy .linkrow button{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--cornflower); color:var(--cornflower); text-decoration:none;
  font:600 12.5px 'IBM Plex Sans',sans-serif; padding:7px 13px; border-radius:20px;
  background:none; cursor:pointer; -webkit-appearance:none; appearance:none;
  line-height:normal; box-sizing:border-box; margin:0;
}
.trasferte-legacy .linkrow a:hover, .trasferte-legacy .linkrow button:hover{background:var(--cornflower); color:#fff;}

.trasferte-legacy table.tl-tabella{width:100%; border-collapse:collapse; margin-top:4px;}
.trasferte-legacy table.tl-tabella th{
  text-align:left; font:600 11px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.04em;
  color:#6a7386; padding:8px 10px; border-bottom:1px solid var(--loom-line);
}
.trasferte-legacy table.tl-tabella td{
  padding:9px 10px; border-bottom:1px solid var(--loom-line); font-size:13.5px; color:var(--ink);
}
.trasferte-legacy table.tl-tabella tr.riga-prato{background:var(--wool-deep); font-weight:600;}
.trasferte-legacy table.tl-tabella tr:last-child td{border-bottom:none;}

/* miniatura logo squadra: calendario (accanto al nome in cal-sq) e
   classifica (accanto al nome in cl-nome). Inline, si comporta bene sia
   nella riga desktop sia nella scheda impilata da mobile. */
.trasferte-legacy .cal-logo,
.trasferte-legacy .cl-logo{
  width:18px; height:18px; object-fit:contain; vertical-align:middle; margin-right:5px;
}

.trasferte-legacy .tl-scatola{
  background:var(--card); border:1px solid var(--loom-line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; margin-bottom:20px;
}
/* solo i blocchi giornata del calendario: cosi' lo scroll automatico sulla
   prossima giornata non la nasconde sotto la barra fissa in alto. */
.trasferte-legacy .giornata-blocco{ scroll-margin-top:90px; }
.trasferte-legacy .tl-scatola h2{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:15px;
  text-transform:uppercase; letter-spacing:.03em; margin:0 0 10px; color:var(--ink);
}
.trasferte-legacy .tl-titolo-logo{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
/* quando il titolo (es. "ROSA 2026/27" in rosa.php) convive con la riga di
   loghi nello stesso .tl-titolo-logo, i loghi stanno in un contenitore a
   parte cosi' vanno a capo tutti insieme, allineati fra loro, invece di
   mischiarsi col testo del titolo quando lo spazio manca (mobile). */
.trasferte-legacy .tl-titolo-logo .tl-loghi-riga{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  flex:1 1 260px; justify-content:flex-end;
}
.trasferte-legacy .tl-titolo-logo .logo-prato{ height:144px; width:auto; flex:none; }
.trasferte-legacy .tl-titolo-logo .tl-title-img{ width:auto; height:auto; max-height:90px; max-width:225px; flex:none; display:block; object-fit:contain; }
.trasferte-legacy .tl-titolo-logo .tl-title-img-lg{ max-height:158px; max-width:394px; }
.trasferte-legacy .tl-titolo-logo .tl-title-img-wide{ max-width:281px; }
.trasferte-legacy .rosa-maglie{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:18px; margin-top:6px;
}
.trasferte-legacy .maglia-card{
  background:var(--card); border:1px solid var(--loom-line); border-radius:var(--radius);
  padding:16px 10px 14px; text-align:center; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease; cursor:default;
}
.trasferte-legacy .maglia-card:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 2px rgba(32,41,58,.06), 0 16px 28px -14px rgba(32,41,58,.5);
}
.trasferte-legacy .maglia-svg{ width:100%; max-width:118px; height:auto; display:block; margin:0 auto; }
.trasferte-legacy .maglia-cognome{
  margin-top:9px; font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:14.5px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink); line-height:1.15;
}
.trasferte-legacy .badge2{
  display:inline-block; padding:2px 10px; border-radius:999px; font:600 11px 'IBM Plex Mono',monospace;
}
.trasferte-legacy .badge2.programmata{background:var(--wool-deep); color:#6a7386;}
.trasferte-legacy .badge2.terminata{background:#E1EBDD; color:var(--loden);}
.trasferte-legacy .badge2.rinviata{background:#F6DDD5; color:var(--thread);}
.trasferte-legacy select, .trasferte-legacy input[type=number]{
  border:1px solid var(--loom-line); border-radius:8px; padding:9px 12px; font:14px 'IBM Plex Sans',sans-serif;
  color:var(--ink); background:#fff;
}
.trasferte-legacy .pulsante2{
  display:inline-block; background:var(--cornflower); color:#fff; border:1px solid var(--cornflower); border-radius:8px;
  padding:10px 16px; font:600 13px 'IBM Plex Sans',sans-serif; cursor:pointer; text-decoration:none; margin-top:10px;
  -webkit-appearance:none; appearance:none; line-height:normal; box-sizing:border-box;
}
.trasferte-legacy .pulsante2:hover{background:var(--ink); border-color:var(--ink);}
.trasferte-legacy .pulsante2.chiaro{background:none; color:var(--cornflower);}
.trasferte-legacy .pulsante2.chiaro:hover{background:var(--wool-deep); color:var(--ink); border-color:var(--loom-line);}
.trasferte-legacy .avviso2{
  background:var(--wool-deep); border:1px solid var(--loom-line); color:#4B5568; padding:10px 14px;
  border-radius:8px; font-size:13px; margin-bottom:14px;
}

/* ---------- Bacheca ----------
   Stessa vista identica su desktop e telefono (fino al settembre 2026 il
   desktop aveva bolle di chat a sinistra/destra con scroll tutto suo del
   pannello messaggi; ora, come da richiesta, e' unificata sullo stile a
   "scheda" nato per il telefono): ogni messaggio e' una scheda bianca di
   altezza standard — testo troncato a due righe, miniatura se c'e' una
   foto — e un tocco/click sulla scheda (fuori dai bottoni modifica/elimina)
   la apre: testo intero, foto grande, azioni visibili. Il messaggio "mio"
   si riconosce da un bordo di accento a sinistra (come riga-prato altrove),
   non da un lato opposto della fila. La lista non ha un suo scroll interno:
   scorre con la pagina come il resto del sito (vedi bacheca.php). */
.trasferte-legacy .blista{
  display:flex; flex-direction:column; background:var(--wool-deep); gap:10px; padding:14px 12px 8px;
}
.trasferte-legacy .bmsg{ display:flex; gap:8px; align-items:flex-start; max-width:100%; align-self:stretch; }
.trasferte-legacy .bmsg.mio{ align-self:stretch; flex-direction:row; }
.trasferte-legacy .bmsg-corpo{
  flex:1; min-width:0; cursor:pointer;
  background:var(--card); border:1px solid var(--loom-line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px 12px;
}
.trasferte-legacy .bmsg.mio .bmsg-corpo{
  background:var(--card); color:var(--ink);
  border-left:3px solid var(--cornflower); border-radius:4px var(--radius) var(--radius) 4px;
}
.trasferte-legacy .bmsg.aperto .bmsg-corpo{
  box-shadow:0 2px 0 rgba(32,41,58,.08), 0 14px 26px -14px rgba(32,41,58,.45);
}
.trasferte-legacy .bmsg-autore{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--cornflower); margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--loom-line);
}
.trasferte-legacy .bmsg.mio .bmsg-autore{ color:var(--cornflower); }
.trasferte-legacy .bmsg-autore-riga{ display:flex; align-items:baseline; gap:8px; min-width:0; overflow:hidden; }
.trasferte-legacy .bmsg-autore-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trasferte-legacy .bmsg-quando{
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500; letter-spacing:0;
  text-transform:none; color:#9aa3b4; flex:none;
}
.trasferte-legacy .bmsg-chev{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--wool-deep); color:var(--cornflower);
  font-size:19px; line-height:1; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.trasferte-legacy .bmsg.aperto .bmsg-chev{ transform:rotate(90deg); background:var(--cornflower); color:#fff; }

/* riga di contenuto chiusa: testo troncato a sinistra + miniatura a destra,
   altezza minima uguale per tutte le schede (con o senza foto, corte o lunghe) */
.trasferte-legacy .bmsg-contenuto{ display:flex; align-items:center; gap:10px; min-height:52px; }
.trasferte-legacy .bmsg-testo{
  flex:1; min-width:0; font-size:14px; line-height:1.4; min-height:2.8em;
  white-space:pre-wrap; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.trasferte-legacy .bmsg-testo a{ color:inherit; text-decoration:underline; }
.trasferte-legacy .bmsg-img-link{ flex:none; }
.trasferte-legacy .bmsg-img-link .bmsg-img,
.trasferte-legacy .bmsg-img{
  width:52px; height:52px; object-fit:cover; border-radius:8px; margin:0; display:block; cursor:zoom-in;
}

/* scheda aperta: niente piu' troncamento, foto a grandezza leggibile, azioni visibili */
.trasferte-legacy .bmsg.aperto .bmsg-contenuto{ align-items:flex-start; flex-direction:column; min-height:0; }
.trasferte-legacy .bmsg.aperto .bmsg-testo{
  -webkit-line-clamp:unset; display:block; overflow:visible; min-height:0;
}
.trasferte-legacy .bmsg.aperto .bmsg-img-link .bmsg-img,
.trasferte-legacy .bmsg.aperto .bmsg-img{
  width:auto; height:auto; max-width:100%; max-height:320px; object-fit:contain;
  border-radius:8px; margin-top:8px;
}
.trasferte-legacy .bmsg-meta{
  display:none;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#6a7386;
  align-items:center; gap:8px; flex-wrap:wrap;
}
.trasferte-legacy .bmsg.aperto .bmsg-meta{
  display:flex; margin-top:10px; padding-top:8px; border-top:1px dashed var(--loom-line); color:#6a7386;
}
.trasferte-legacy .bmsg-mod{ font-style:italic; }
.trasferte-legacy .bmsg-azioni{ margin-left:auto; display:flex; gap:8px; }
.trasferte-legacy .bmsg-azioni button{
  background:none; border:none; padding:0; font:inherit; font-size:10.5px; color:inherit;
  text-decoration:underline; cursor:pointer; opacity:.75;
}
.trasferte-legacy .bmsg-azioni button:hover{ opacity:1; }
.trasferte-legacy .bmsg-edit{ margin-top:6px; }
.trasferte-legacy .bmsg-edit textarea{
  width:100%; border-radius:8px; border:1px solid var(--loom-line); padding:8px; font:14px 'IBM Plex Sans',sans-serif;
  color:var(--ink); resize:vertical; min-height:44px;
}
.trasferte-legacy .bmsg-edit .pulsante2{ margin-top:6px; margin-right:6px; padding:6px 12px; font-size:12px; }

.trasferte-legacy .bform{ border-top:1px solid var(--loom-line); padding:12px 16px 16px; }
.trasferte-legacy .bform-riga{ display:flex; gap:8px; align-items:flex-end; }
.trasferte-legacy .bform textarea{
  flex:1; border:1px solid var(--loom-line); border-radius:18px; padding:10px 16px;
  font:16px 'IBM Plex Sans',sans-serif; color:var(--ink); resize:none; max-height:280px; line-height:1.35;
}
.trasferte-legacy .bform .pulsante2{ margin:0; flex:none; }
.trasferte-legacy .banteprima{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  background:var(--wool-deep); border:1px solid var(--loom-line); border-radius:8px; padding:6px 10px; width:fit-content;
}
.trasferte-legacy .banteprima img{ max-height:56px; border-radius:6px; display:block; }
.trasferte-legacy .banteprima button{ background:none; border:none; color:#8B93A3; cursor:pointer; font-size:14px; }


/* ================================================================
   ADATTAMENTO A TABLET E TELEFONO
   In fondo al file di proposito: cosi' queste regole vincono su
   tutto quello che sta sopra senza bisogno di !important.

   Sotto i 900px la sidebar esce dal flusso e diventa un cassetto
   che scorre da sinistra, comandato dal pulsante hamburger.
   ================================================================ */
@media (max-width: 900px) {

  /* il guscio smette di essere a due colonne */
  .shell { display: block; }

  /* --- barra fissa in alto con hamburger --- */
  .barra-mobile {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 40;
    background: var(--inchiostro); color: #fff;
    padding: 9px 12px;
  }
  .barra-mobile .hamburger {
    flex: none; width: 44px; height: 44px;      /* 44px: bersaglio minimo comodo col dito */
    display: grid; place-items: center;
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,.22); border-radius: 8px;
    padding: 0; cursor: pointer;
  }
  .barra-mobile .hamburger:active { background: rgba(255,255,255,.12); }
  .barra-mobile .hamburger svg { display: block; }
  .barra-mobile .titolo-mobile {
    font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 8px; min-width: 0;
  }
  /* SanPaolo1908 ha una sua identita' (Big Shoulders Display, piu' grande e in
     maiuscolo): il Fraunces generico va bene per "Filippo Barni", non per un
     minisito con un carattere suo. */
  .barra-mobile .titolo-mobile-acprato {
    font-family: 'Big Shoulders Display', sans-serif; font-size: 25px; font-weight: 800;
    letter-spacing: .01em; text-transform: uppercase;
  }
  .titolo-mobile-stemma { width: 30px; height: 30px; flex: none; display: block; }

  /* --- la sidebar diventa cassetto --- */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 270px; max-width: 84vw;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  body.menu-aperto .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.45); }
  .sidebar nav a { padding: 11px 12px; }        /* voci piu' alte, si centrano meglio */

  /* "Sito pubblico" ed "Esci" col dito, non col mouse: in riga stavano
     troppo vicini e capitava di toccare quello sbagliato. In colonna,
     con un'area di tocco piu' larga, il problema sparisce. */
  /* la barra fissa in alto a destra e' un'idea da desktop: sul telefono restano
     l'hamburger e l'avatar nella barra-mobile, Profilo/Sito pubblico/Esci tornano
     nel cassetto come prima */
  .barra-superiore { display: none; }
  .sidebar .utente { display: flex; flex-wrap: wrap; row-gap: 10px; }
  .sidebar .utente .utente-azioni { flex-direction: column; align-items: flex-end; gap: 4px; }
  .sidebar .utente .esci { padding: 8px 2px; }

  /* --- velo dietro al cassetto: un tocco ovunque lo chiude --- */
  .velo-menu {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(12,18,32,.55);
    border: 0; padding: 0; margin: 0; cursor: pointer;
  }
  body.menu-aperto .velo-menu { display: block; }
  body.menu-aperto { overflow: hidden; }        /* la pagina sotto non scorre */

  /* --- contenuto a tutta larghezza --- */
  .contenuto { padding: 20px 16px 40px; }

  /* SanPaolo1908 annulla il padding di .contenuto con un margine negativo:
     se cambia l'uno deve cambiare anche l'altro, o la pagina sborda. */
  .trasferte-legacy { margin: -20px -16px; padding: 20px 16px 44px; }

  /* --- ritocchi di respiro --- */
  .testata { margin-bottom: 20px; }
  .testata h1 { font-size: 20px; }
  .contenitore { max-width: none; }
  .scatola, .scatola-larga { padding: 16px; }

  /* Tabelle larghe generiche (elenchi di Radici, amministrazione): diventano
     loro stesse un riquadro che scorre in orizzontale, senza bisogno di
     aggiungere un contenitore nelle pagine PHP.
     Calendario, classifica e marcatori sono escluse: hanno un layout dedicato, in fondo. */
  table:not(.tl-calendario):not(.tl-classifica):not(.tl-marcatori) {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  table:not(.tl-calendario):not(.tl-classifica):not(.tl-marcatori) th,
  table:not(.tl-calendario):not(.tl-classifica):not(.tl-marcatori) td {
    padding: 8px 8px; font-size: 12.5px; white-space: nowrap;
  }

  /* la griglia delle maglie sta comoda a due colonne anche sul telefono */
  .trasferte-legacy .rosa-maglie { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .trasferte-legacy .tl-titolo-logo .logo-prato { height: 67px; }
  .trasferte-legacy .tl-titolo-logo .tl-title-img { max-height: 60px; max-width: 150px; }
  .trasferte-legacy .tl-titolo-logo .tl-title-img-lg { max-height: 105px; max-width: 263px; }
  .trasferte-legacy .tl-titolo-logo .tl-title-img-wide { max-width: 188px; }

  /* la mappa delle trasferte si accorcia, altrimenti riempie mezzo schermo */
  .trasferte-legacy #legacy-map { height: 220px; }
}

/* Sotto i 600px (telefoni veri: i tablet restano con la griglia a due colonne
   di sopra) i riquadri delle maglie di rosa.php si stringono, con meno
   margine bianco per riquadro, cosi' ne stanno di piu' per schermata. */
@media (max-width: 600px) {
  .trasferte-legacy .linkrow {
    gap: 6px;
  }
  .trasferte-legacy .linkrow a,
  .trasferte-legacy .linkrow button {
    padding: 6px 9px;
    gap: 4px;
    font-size: 11px;
  }
  .trasferte-legacy .linkrow .li-icon {
    width: 13px;
    height: 13px;
  }
  .trasferte-legacy .tl-titolo-logo {
    gap: 10px;
  }
  .trasferte-legacy .tl-titolo-logo .tl-loghi-riga {
    flex-basis: 100%;
    justify-content: center;
    gap: 10px;
  }
  .trasferte-legacy .tl-titolo-logo .logo-prato {
    height: 50px;
  }
  .trasferte-legacy .tl-titolo-logo .tl-title-img {
    max-height: 38px;
    max-width: 82px;
  }
  .trasferte-legacy .tl-titolo-logo .tl-title-img-lg {
    max-height: 62px;
    max-width: 150px;
  }
  .trasferte-legacy .tl-titolo-logo .tl-title-img-wide {
    max-width: 103px;
  }
  .trasferte-legacy .rosa-maglie {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
  }
  .trasferte-legacy .maglia-card {
    padding: 6px 3px 5px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(32,41,58,.12);
  }
  .trasferte-legacy .maglia-cognome {
    margin-top: 3px;
    font-size: 9.5px;
    letter-spacing: .02em;
  }
}

/* Chi ha chiesto meno animazioni al sistema operativo non vede scorrere il cassetto */
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}


/* ================================================================
   CALENDARIO, CLASSIFICA E MARCATORI SU TELEFONO
   Sopra i 900px restano le tabelle di sempre: qui sotto la riga
   diventa una schedina, perche' nove colonne di nomi lunghi su 393px
   sono illeggibili anche facendole scorrere.
   ================================================================ */

/* la riga di riassunto della classifica esiste sempre nel markup,
   ma da desktop e' inutile: ci sono gia' le colonne. Stessa cosa per la
   riga "squadra" sotto il nome del giocatore in marcatori.php. */
.trasferte-legacy .tl-classifica .cl-riassunto,
.trasferte-legacy .tl-marcatori .cl-riassunto { display: none; }
.trasferte-legacy .tl-calendario .cal-chevron { display: none; }

@media (max-width: 900px) {

  /* ---------- CALENDARIO: una scheda per partita ---------- */
  .trasferte-legacy .tl-calendario,
  .trasferte-legacy .tl-calendario tbody { display: block; width: 100%; }

  .trasferte-legacy .tl-calendario tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "quando  esito chevron"
      "squadre esito chevron";
    align-items: center;
    column-gap: 10px;
    padding: 9px 10px;
    position: relative;                 /* aggancio del link a tutta scheda */
    border-bottom: 1px solid var(--loom-line);
  }
  .trasferte-legacy .tl-calendario tr:last-child { border-bottom: none; }

  .trasferte-legacy .tl-calendario td {
    display: block; padding: 0; border: none;
  }

  .trasferte-legacy .tl-calendario .cal-quando {
    grid-area: quando;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    color: #6a7386; letter-spacing: .02em; margin-bottom: 3px;
  }

  /* le due squadre una sotto l'altra: cosi' nessun nome viene troncato,
     nemmeno "Flaminia Civitacastellana" */
  .trasferte-legacy .tl-calendario .cal-squadre { grid-area: squadre; }
  .trasferte-legacy .tl-calendario .cal-sq {
    display: block; font-size: 13.5px; line-height: 1.3;
  }
  .trasferte-legacy .tl-calendario .cal-nostra { font-weight: 700; color: var(--cornflower); }
  .trasferte-legacy .tl-calendario .cal-vs { display: none; }   /* il trattino serve solo in riga */

  .trasferte-legacy .tl-calendario .cal-esito {
    grid-area: esito; text-align: right; font-size: 14px; white-space: nowrap;
  }
  .trasferte-legacy .tl-calendario .cal-esito .badge2 { font-size: 10px; padding: 2px 7px; }

  .trasferte-legacy .tl-calendario .cal-azione { grid-area: chevron; }
  .trasferte-legacy .tl-calendario .cal-etichetta { display: none; }
  .trasferte-legacy .tl-calendario .cal-chevron {
    display: block; font-size: 22px; line-height: 1; color: #9aa3b4; padding-left: 2px;
  }
  /* il link si allarga su tutta la scheda: il bersaglio da colpire col dito
     e' la riga intera, non la freccina */
  .trasferte-legacy .tl-calendario .cal-link::after { content: ""; position: absolute; inset: 0; }
  .trasferte-legacy .tl-calendario .cal-link { text-decoration: none; }

  .trasferte-legacy .tl-calendario tr.riga-prato {
    border-left: 4px solid var(--cornflower); padding-left: 8px;
  }

  /* ---------- CLASSIFICA e MARCATORI: tre colonne, il resto riassunto sotto al nome ----------
     Marcatori fa eccezione sulle colonne extra: sono solo due (rigori, media),
     ci stanno anche sul telefono, mentre le sette di classifica no. */
  .trasferte-legacy .tl-classifica .cl-extra-col { display: none; }
  .trasferte-legacy .tl-marcatori .cl-extra-col { font-size: 12px; text-align: center; }
  .trasferte-legacy .tl-classifica th, .trasferte-legacy .tl-classifica td,
  .trasferte-legacy .tl-marcatori th, .trasferte-legacy .tl-marcatori td { padding: 8px 6px; }
  .trasferte-legacy .tl-classifica .cl-pos,
  .trasferte-legacy .tl-marcatori .cl-pos {
    font-family: 'Big Shoulders Display', sans-serif; font-weight: 800;
    font-size: 17px; color: var(--cornflower); width: 26px; text-align: center;
  }
  .trasferte-legacy .tl-classifica .cl-nome,
  .trasferte-legacy .tl-marcatori .cl-nome { display: block; font-size: 13.5px; line-height: 1.25; }
  .trasferte-legacy .tl-classifica .cl-riassunto,
  .trasferte-legacy .tl-marcatori .cl-riassunto {
    display: block; font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px; color: #6a7386; margin-top: 2px;
  }
  .trasferte-legacy .tl-classifica .cl-punti,
  .trasferte-legacy .tl-marcatori .cl-punti {
    text-align: right; font-size: 16px; width: 34px;
  }
  .trasferte-legacy .tl-classifica tr.riga-prato .cl-nome,
  .trasferte-legacy .tl-marcatori tr.riga-prato .cl-nome { font-weight: 700; }
}

/* Da desktop la posizione in classifica/marcatori conserva il suo stile di sempre
   (prima era scritto a mano nella pagina) */
.trasferte-legacy .tl-classifica .cl-pos,
.trasferte-legacy .tl-marcatori .cl-pos {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; color: var(--cornflower);
}

/* ================================================================
   ALBUM FOTOGRAFICI, REAZIONI, PULSANTE FLOTTANTE MOBILE
   Aggiunto in fondo di proposito, come il resto degli adattamenti:
   cosi' vince su tutto quello che sta sopra senza bisogno di !important.
   ================================================================ */

/* squadra "nostra" evidenziata, generico (non solo dentro al calendario mobile) */
.trasferte-legacy .sq-nostra { font-weight: 700; color: var(--cornflower); }

/* riga "iscritti/partecipanti" dentro le nextcard: sempre bianca, sia sullo
   sfondo blu (trasferta) sia su quello verde (.nextcard-casa) — prima era
   grigio scuro inline, illeggibile su entrambi gli sfondi scuri. */
.trasferte-legacy .nextcard-iscritti { font-size: 12.5px; color: #fff; margin: 2px 0 0; opacity: .92; }

/* --- fix "Orario di ritrovo" che va sotto a "Mezzo" su telefono ---
   La causa vera non è la soglia del breakpoint ma min-width:auto di default
   sugli elementi di una grid: un datetime-local nativo (soprattutto su iOS)
   ha una larghezza intrinseca che puo' superare la colonna assegnata, e senza
   min-width:0 la colonna si allarga invece di stringere il contenuto,
   sbordando su quella accanto. Si abbassa anche la soglia di stacking a una
   larghezza piu' comoda, come rete di sicurezza sui telefoni piu' stretti. */
.trasferte-legacy .row2 > .field { min-width: 0; }
.trasferte-legacy .row2 .field input[type=datetime-local],
.trasferte-legacy .row2 .field select { min-height: 42px; }
@media (max-width: 560px) { .trasferte-legacy .row2 { grid-template-columns: 1fr; } }

/* ---------- pulsante flottante (apre il menù senza risalire la pagina) ---------- */
.fab-menu {
  display: none; /* solo sotto i 900px, vedi il breakpoint piu' in basso */
}
@media (max-width: 900px) {
  .fab-menu {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 18px; bottom: 22px; z-index: 45;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(145deg, var(--inchiostro-chiaro), var(--inchiostro)); color: #fff; border: none;
    box-shadow: 0 6px 18px rgba(18,22,27,.35), 0 2px 6px rgba(18,22,27,.25);
    cursor: pointer; padding: 0;
    opacity: 0; transform: translateY(10px) scale(.9);
    transition: opacity .18s ease, transform .18s ease;
  }
  .fab-menu:not([hidden]) { opacity: 1; transform: translateY(0) scale(1); }
  .fab-menu[hidden] { display: flex; pointer-events: none; } /* transizione in uscita, poi si nasconde davvero */
  .fab-menu:active { transform: scale(.94); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .fab-menu { transition: none; }
}

/* ---------- modale generico (usato da "sposta in album") ---------- */
.modale-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(12,18,32,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modale-scatola {
  background: #fff; border-radius: 12px; padding: 22px 22px 18px;
  width: 100%; max-width: 380px; box-shadow: 0 20px 50px -12px rgba(0,0,0,.45);
  font-family: 'IBM Plex Sans', sans-serif; color: var(--ink, #20293A);
}
.modale-scatola .field select {
  width: 100%; border: 1px solid var(--loom-line, #C9BFA6); background: #fff; border-radius: 8px;
  padding: 9px 10px; font: 14px/1.4 'IBM Plex Sans', sans-serif;
}

/* ---------- album fotografico: header dell'evento ---------- */
.trasferte-legacy .albh {
  background: var(--card); border: 1px solid var(--loom-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; margin: 0 0 20px;
}
.trasferte-legacy .albh-squadre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trasferte-legacy .albh-sq {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 24px;
}
.trasferte-legacy .albh-vs { font-size: 15px; font-weight: 600; opacity: .6; }
.trasferte-legacy .albh-logo { width: 30px; height: 30px; object-fit: contain; flex: none; }
.trasferte-legacy .albh-risultato {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 20px;
  color: var(--cornflower); margin: 6px 0 0;
}
.trasferte-legacy .albh-quando { font-size: 13px; color: #4B5568; margin: 6px 0 0; }
.trasferte-legacy .albh-marcatori { font-size: 12px; color: #4B5568; margin: 6px 0 0; }

/* ---------- album fotografico: pager avanti/indietro ---------- */
.trasferte-legacy .apager {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--loom-line);
}
.trasferte-legacy .apager-conteggio { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #6a7386; }

/* ---------- album fotografico: post (stessa impostazione visiva di .bmsg) ---------- */
.trasferte-legacy .alista { display: flex; flex-direction: column; background: var(--wool-deep); gap: 10px; padding: 14px 12px 8px; }
.trasferte-legacy .amsg { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.trasferte-legacy .amsg-corpo {
  flex: 1; min-width: 0; cursor: pointer;
  background: var(--card); border: 1px solid var(--loom-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 12px;
}
.trasferte-legacy .amsg.mio .amsg-corpo {
  background: var(--card); border-left: 3px solid var(--cornflower); border-radius: 4px var(--radius) var(--radius) 4px;
}
.trasferte-legacy .amsg.aperto .amsg-corpo { box-shadow: 0 2px 0 rgba(32,41,58,.08), 0 14px 26px -14px rgba(32,41,58,.45); }
.trasferte-legacy .amsg-autore {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cornflower); margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--loom-line);
}
.trasferte-legacy .amsg-chev {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wool-deep); color: var(--cornflower);
  font-size: 19px; line-height: 1; transition: transform .15s ease, background .15s ease, color .15s ease;
}
.trasferte-legacy .amsg.aperto .amsg-chev { transform: rotate(90deg); background: var(--cornflower); color: #fff; }
.trasferte-legacy .amsg-autore-riga { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.trasferte-legacy .amsg-autore-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trasferte-legacy .amsg-quando {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: #9aa3b4; flex: none;
}
.trasferte-legacy .amsg-contenuto { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.trasferte-legacy .amsg-testo { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.trasferte-legacy .amsg-testo a { color: inherit; text-decoration: underline; }
.trasferte-legacy .amsg.aperto .amsg-contenuto { align-items: flex-start; flex-direction: column; min-height: 0; }
.trasferte-legacy .amsg-meta {
  display: none; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: #6a7386;
  align-items: center; gap: 8px; flex-wrap: wrap;
}
.trasferte-legacy .amsg.aperto .amsg-meta { display: flex; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--loom-line); }
.trasferte-legacy .amsg-mod { font-style: italic; }
.trasferte-legacy .amsg-azioni { margin-left: auto; display: flex; gap: 8px; }
.trasferte-legacy .amsg-azioni button {
  background: none; border: none; padding: 0; font: inherit; font-size: 10.5px; color: inherit;
  text-decoration: underline; cursor: pointer; opacity: .75;
}
.trasferte-legacy .amsg-azioni button:hover { opacity: 1; }
.trasferte-legacy .amsg-edit { margin-top: 6px; }

/* ---------- reazioni (like / cuore / dislike), condivise bacheca + album ----------
   .reaz-riepilogo: icona+numero, SEMPRE visibile, anche a badge chiuso ("in
   bella vista"). .reaz-interattivo (bottoni cliccabili + elenco nomi): solo
   da badge aperto, stessa regola gia' usata per data/ora estesa e azioni. */
.trasferte-legacy .reaz-riepilogo { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.trasferte-legacy .reaz-riepilogo:empty { margin-top: 0; }
.trasferte-legacy .reaz-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--wool-deep); border: 1px solid var(--loom-line); border-radius: 999px;
  padding: 2px 8px; font-size: 12px; line-height: 1.4;
}
.trasferte-legacy .reaz-chip .reaz-n { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; color: #4B5568; }
.trasferte-legacy .reaz-interattivo { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--loom-line); }
.trasferte-legacy .bmsg.aperto .reaz-interattivo, .trasferte-legacy .amsg.aperto .reaz-interattivo { display: block; }
.trasferte-legacy .reaz-bottoni { display: flex; gap: 6px; flex-wrap: wrap; }
.trasferte-legacy .reaz-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--wool-deep); border: 1px solid var(--loom-line); border-radius: 999px;
  padding: 4px 10px; font-size: 13px; line-height: 1; cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif; color: var(--ink);
  transition: transform .1s ease, background .15s ease;
}
.trasferte-legacy .reaz-btn:hover { background: #fff; }
.trasferte-legacy .reaz-btn:active { transform: scale(.92); }
.trasferte-legacy .reaz-btn .reaz-n { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; }
.trasferte-legacy .reaz-btn.mia { border-color: var(--cornflower); background: #fff; box-shadow: 0 0 0 1px var(--cornflower) inset; }
.trasferte-legacy .reaz-btn.reaz-like.mia { box-shadow: 0 0 0 1px var(--cornflower) inset; }
.trasferte-legacy .reaz-btn.reaz-cuore.mia { box-shadow: 0 0 0 1px #4a86e8 inset; }
.trasferte-legacy .reaz-btn.reaz-dislike.mia { box-shadow: 0 0 0 1px var(--thread) inset; }
.trasferte-legacy .reaz-btn[disabled] { cursor: default; opacity: .7; }
.trasferte-legacy .reaz-elenco { margin-top: 6px; }
.trasferte-legacy .reaz-elenco summary {
  font-size: 11px; color: var(--cornflower); cursor: pointer; list-style: none; display: inline-block;
}
.trasferte-legacy .reaz-elenco summary::-webkit-details-marker { display: none; }
.trasferte-legacy .reaz-elenco summary::after { content: ' ▾'; }
.trasferte-legacy .reaz-elenco[open] summary::after { content: ' ▴'; }
.trasferte-legacy .reaz-gruppo { font-size: 11.5px; color: #4B5568; margin-top: 4px; }
.trasferte-legacy .reaz-gruppo b { margin-right: 4px; }

/* ---------- carosello upload: striscia di anteprime con rimozione singola ---------- */
.trasferte-legacy .astrip-anteprima { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.trasferte-legacy .astrip-cella {
  position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--loom-line); flex: none;
}
.trasferte-legacy .astrip-cella img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trasferte-legacy .astrip-cella button {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; margin: 0;
  background: rgba(18,22,27,.7); color: #fff; border: none; border-radius: 50%;
  font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* ---------- carosello foto album: badge chiuso mostra TUTTE le miniature in
   griglia (prima c'era solo la prima foto + "+N": con più spazio a disposizione
   non serve più nascondere le altre). Badge aperto resta un vero carosello
   scorrevole con pallini e contatore, invariato. ---------- */
.trasferte-legacy .amsg-carosello { position: relative; flex: none; }
.trasferte-legacy .amsg-carosello-scroll {
  display: flex; overflow-x: hidden; scroll-snap-type: x mandatory;
  width: 64px; height: 64px; border-radius: 8px;
}
.trasferte-legacy .amsg-carosello-slide { flex: none; width: 64px; height: 64px; scroll-snap-align: start; display: block; }
.trasferte-legacy .amsg-carosello-slide img { width: 64px; height: 64px; object-fit: cover; display: block; }
.trasferte-legacy .amsg-carosello-piu { display: none; } /* badge chiuso: obsoleto, ora si vedono già tutte le foto */
.trasferte-legacy .amsg-carosello-dots, .trasferte-legacy .amsg-carosello-conteggio { display: none; }

/* più di una foto, badge chiuso: la riga testo+miniatura diventa una colonna,
   cosi' la griglia di miniature ha tutta la larghezza della scheda per respirare */
.trasferte-legacy .amsg-contenuto.multi { flex-direction: column; align-items: stretch; min-height: 0; }
.trasferte-legacy .amsg-contenuto.multi .amsg-carosello-scroll {
  flex-wrap: wrap; overflow: visible; scroll-snap-type: none;
  width: 100%; height: auto; gap: 5px; border-radius: 0;
}
.trasferte-legacy .amsg-contenuto.multi .amsg-carosello-slide {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
}
.trasferte-legacy .amsg-contenuto.multi .amsg-carosello-slide img { width: 56px; height: 56px; }

.trasferte-legacy .amsg.aperto .amsg-carosello-scroll {
  flex-wrap: nowrap; width: 100%; height: auto; max-height: 420px; overflow-x: auto;
  scroll-snap-type: x mandatory; border-radius: 8px; gap: 0;
  margin-top: 8px; scroll-behavior: smooth;
}
.trasferte-legacy .amsg.aperto .amsg-carosello-slide { width: 100%; height: auto; max-height: 420px; border-radius: 0; }
.trasferte-legacy .amsg.aperto .amsg-carosello-slide img {
  width: 100%; height: auto; max-height: 420px; object-fit: contain; background: #12161B; cursor: zoom-in;
}
.trasferte-legacy .amsg.aperto .amsg-carosello-dots { display: flex; gap: 5px; justify-content: center; margin-top: 6px; }
.trasferte-legacy .amsg.aperto .amsg-carosello-conteggio {
  display: block; position: absolute; top: 16px; right: 8px; background: rgba(18,22,27,.6); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 999px; font-family: 'IBM Plex Mono', monospace;
}
.trasferte-legacy .amsg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--loom-line); cursor: pointer; border: none; padding: 0; }
.trasferte-legacy .amsg-dot.attivo { background: var(--cornflower); }

@media (max-width: 900px) {
  .trasferte-legacy .amsg-carosello-scroll, .trasferte-legacy .amsg-carosello-slide { width: 54px; height: 54px; }
  .trasferte-legacy .amsg-carosello-slide img { width: 54px; height: 54px; }
  .trasferte-legacy .albh-sq { font-size: 20px; }
}

/* ---------- calendario: "Dettagli" diventa un vero pulsante, in testa alla riga
   (solo da desktop: sotto i 900px la card è già tutta toccabile e la
   freccina in alto a destra resta come prima, look apposta discreto) ---------- */
@media (min-width: 901px) {
  .trasferte-legacy .cal-dettagli-btn {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--cornflower); color: #fff; border: 1px solid var(--cornflower); border-radius: 999px;
    padding: 5px 12px; font: 600 12px 'IBM Plex Sans', sans-serif; text-decoration: none; white-space: nowrap;
  }
  .trasferte-legacy .cal-dettagli-btn:hover { background: var(--ink); border-color: var(--ink); }
}


/* ---------- notizie: card "a badge" (stesso guscio .tag di album/trasferte) ---------- */
.trasferte-legacy .notizia-card { display: flex; flex-direction: column; }
.trasferte-legacy .notizia-img {
  display: block; width: calc(100% + 32px); max-width: calc(100% + 32px); height: 140px;
  /* contain, non cover: una foto intera con un po' di bordo neutro è sempre
     meglio di una foto con la testa di qualcuno tagliata fuori dall'inquadratura */
  object-fit: contain; margin: -16px -16px 12px; background: var(--wool-deep);
}
.trasferte-legacy .notizia-img-logo { padding: 20px; box-sizing: border-box; }
.trasferte-legacy .notizia-img-vuota {
  display: flex; align-items: center; justify-content: center; font-size: 32px; color: #b7bec9;
}
.trasferte-legacy .notizia-titolo { margin: 0 0 6px; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.trasferte-legacy .notizia-titolo a { color: inherit; text-decoration: none; }
.trasferte-legacy .notizia-titolo a:hover { text-decoration: underline; }
.trasferte-legacy .notizia-estratto {
  font-size: 12.5px; color: #4B5568; line-height: 1.45; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* sotto i 600px le card diventano quasi larghe quanto lo schermo (vedi .grid,
   una sola colonna sotto i 230px di minmax): un banner a piena larghezza lì
   pesa troppo, indipendentemente da quanto lo si abbassi. Sotto quella soglia
   l'immagine smette di essere un banner in cima alla card e diventa una vera
   miniatura piccola (64×64) accanto al testo, come nel widget della dashboard —
   niente più calc()/margini negativi, dimensioni fisse ed esplicite. */
@media (max-width: 600px) {
  .trasferte-legacy .notizia-card .tag-body {
    display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto auto;
    column-gap: 10px;
  }
  .trasferte-legacy .notizia-img {
    grid-column: 1; grid-row: 1 / 3;
    width: 64px; height: 64px; max-width: 64px; min-width: 0;
    margin: 0; border-radius: 8px;
  }
  .trasferte-legacy .notizia-img-logo { padding: 8px; }
  .trasferte-legacy .notizia-img-vuota { font-size: 20px; }
  .trasferte-legacy .notizia-card .tag-place { grid-column: 2; grid-row: 1; margin: 0; }
  .trasferte-legacy .notizia-titolo { grid-column: 2; grid-row: 2; margin: 0; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .trasferte-legacy .notizia-estratto { grid-column: 1 / -1; grid-row: 3; margin: 10px 0; }
  .trasferte-legacy .notizia-card .tag-meta { grid-column: 1 / -1; grid-row: 4; }
}

/* ---------- notizie: widget compatto per la dashboard ---------- */
.trasferte-legacy .notizie-widget-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.trasferte-legacy .notizie-widget-riga { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.trasferte-legacy .notizie-widget-riga img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; background: var(--wool-deep); }
.trasferte-legacy .notizie-widget-riga img.notizie-widget-logo { object-fit: contain; padding: 6px; box-sizing: border-box; }
.trasferte-legacy .notizie-widget-senza-img {
  width: 48px; height: 48px; border-radius: 8px; background: var(--wool-deep);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none;
}
.trasferte-legacy .notizie-widget-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trasferte-legacy .notizie-widget-titolo {
  font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.trasferte-legacy .notizie-widget-meta { font-size: 11px; color: #6a7386; font-family: 'IBM Plex Mono', monospace; }
.trasferte-legacy .notizie-widget-riga:hover .notizie-widget-titolo { text-decoration: underline; }

/* ---------- Statistiche (pagina statistiche.php) ---------- */
.trasferte-legacy .st-hero{display:flex; gap:14px; margin:18px 0 22px; flex-wrap:wrap;}
.trasferte-legacy .st-hero-card{flex:1 1 160px; border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.trasferte-legacy .st-hero-card.st-accent{background:var(--cornflower); color:#fff;}
.trasferte-legacy .st-hero-card.st-plain{background:var(--card); border:1px solid var(--loom-line); color:var(--ink);}
.trasferte-legacy .st-hero-label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.85;}
.trasferte-legacy .st-hero-card.st-plain .st-hero-label{color:var(--loden); opacity:1;}
.trasferte-legacy .st-hero-num{font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:40px; line-height:1; margin-top:4px;}
.trasferte-legacy .st-hero-sub{font-size:12px; margin-top:3px; opacity:.85;}

.trasferte-legacy .st-section-title{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:15px;
  text-transform:uppercase; letter-spacing:.03em; margin:26px 0 10px; color:var(--ink);
}
.trasferte-legacy .st-section-title:first-child{margin-top:0;}

.trasferte-legacy .st-forma{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.trasferte-legacy .st-forma-pill{
  width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:15px; color:#fff; flex:none;
}
.trasferte-legacy .st-forma-pill.v{background:var(--loden);}
.trasferte-legacy .st-forma-pill.n{background:var(--cornflower);}
.trasferte-legacy .st-forma-pill.p{background:var(--thread);}
.trasferte-legacy .st-forma-nota{font-size:12px; color:#6a7386; margin-left:6px;}

.trasferte-legacy .st-bar-row{display:grid; grid-template-columns:78px 1fr 48px; align-items:center; gap:10px; font-size:12.5px; margin-bottom:8px;}
.trasferte-legacy .st-bar-row:last-child{margin-bottom:0;}
.trasferte-legacy .st-bar-label{color:#5B6577;}
.trasferte-legacy .st-bar-track{height:10px; border-radius:5px; background:var(--wool-deep); overflow:hidden;}
.trasferte-legacy .st-bar-fill{height:100%;}
.trasferte-legacy .st-bar-val{text-align:right; font-family:'IBM Plex Mono',monospace; color:var(--ink);}

.trasferte-legacy .st-split{display:flex; height:22px; border-radius:6px; overflow:hidden; margin:2px 0 10px;}
.trasferte-legacy .st-split-legend{display:flex; gap:16px; font-size:12px; color:#5B6577; flex-wrap:wrap;}
.trasferte-legacy .st-split-legend span{display:inline-flex; align-items:center; gap:6px;}
.trasferte-legacy .st-split-legend i{width:9px; height:9px; border-radius:2px; display:inline-block;}

.trasferte-legacy .st-top{display:flex; align-items:center; gap:12px; background:var(--cornflower); color:#fff; border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow);}
.trasferte-legacy .st-top-num{font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:26px; line-height:1; flex:none;}
.trasferte-legacy .st-top-name{font-weight:600; font-size:15px;}
.trasferte-legacy .st-top-sub{font-size:11.5px; opacity:.85; font-family:'IBM Plex Mono',monospace;}

.trasferte-legacy .st-2col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:640px){ .trasferte-legacy .st-2col{grid-template-columns:1fr;} }


/* =====================================================================
   TEMA SCURO — solo minisito SanPaolo1908 (G999 Prato 1908)
   ---------------------------------------------------------------------
   Attivato da <html data-tema="scuro">, impostato prima del disegno della
   pagina dallo script in acpratoTagPwa() (_nav.php): segue il telefono/PC
   oppure la scelta forzata dall'interruttore in sidebar (localStorage).
   Radici e le pagine di piattaforma non chiamano acpratoTagPwa(): restano
   sempre chiare.
   Strategia: 1) ridefinire le variabili (executive + legacy); 2) coprire i
   colori scritti "a mano" nel CSS e negli attributi style="" delle pagine.
   ===================================================================== */
html[data-tema="scuro"] { color-scheme: dark; }
html[data-tema="scuro"] {
  --carta: #10151D;
  --testo: #E4E8EF;
  --testo-secondario: #A7B0BF;
  --lana: #1C2432;
  --lana-bordo: #2C3649;
  --riga: #2A3345;
}
html[data-tema="scuro"] body { background: var(--carta); color: var(--testo); }
html[data-tema="scuro"] a { color: #D9A95E; }

/* Guscio: barra in alto (desktop), sidebar gia' scura, badge, modali shell */
html[data-tema="scuro"] .barra-superiore { background: #151B26; border-bottom-color: var(--riga); }
html[data-tema="scuro"] .barra-superiore-nome { color: #E4E8EF; }
html[data-tema="scuro"] .barra-superiore-utente { background: transparent; }
html[data-tema="scuro"] .barra-superiore-utente a { color: inherit; }
html[data-tema="scuro"] .barra-superiore-utente .chi { color: #E4E8EF; }
html[data-tema="scuro"] .barra-superiore-utente .utente-azioni a { color: #A7B0BF; }
html[data-tema="scuro"] .barra-superiore-utente .utente-azioni a:hover { color: #fff; }
html[data-tema="scuro"] .sidebar { background: #0B0F15; }
html[data-tema="scuro"] .barra-mobile { background: #0B0F15; }
html[data-tema="scuro"] input,
html[data-tema="scuro"] select,
html[data-tema="scuro"] textarea { background: #1A2130; color: var(--testo); border-color: #344055; }
html[data-tema="scuro"] .pulsante.secondario { background: #1A2130; color: var(--testo); }
html[data-tema="scuro"] .selettore-vista button.attivo { background: #2A3345; color: #fff; }
html[data-tema="scuro"] #pwa-istruzioni > div { background: #1A2130 !important; color: #E4E8EF !important; }

/* Variabili dello stile trasferte-legacy */
html[data-tema="scuro"] .trasferte-legacy {
  --wool: #121821; --wool-deep: #1C2432; --ink: #E4E8EF;
  --cornflower: #0066cc; --cornflower-light: #7EB8F2;
  --thread: #B6402A; --loden: #54704E; --loom-line: #344055; --card: #1A2130;
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.8);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 6px), var(--wool);
  color: var(--ink);
}

html[data-tema="scuro"] .trasferte-legacy .badge2.programmata { color: #A7B0BF; }
html[data-tema="scuro"] .trasferte-legacy .badge2.terminata { background: #243322; color: #9CC191; }
html[data-tema="scuro"] .trasferte-legacy .badge2.rinviata { background: #3A221D; color: #F09A86; }

/* Sfondi bianchi scritti a mano: campi, reazioni, modali */
html[data-tema="scuro"] .trasferte-legacy input,
html[data-tema="scuro"] .trasferte-legacy select,
html[data-tema="scuro"] .trasferte-legacy textarea,
html[data-tema="scuro"] .trasferte-legacy .field input,
html[data-tema="scuro"] .trasferte-legacy .field select,
html[data-tema="scuro"] .trasferte-legacy .field textarea { background: #10151D; color: var(--ink); border-color: var(--loom-line); }
html[data-tema="scuro"] .trasferte-legacy .reaz-btn:hover,
html[data-tema="scuro"] .trasferte-legacy .reaz-btn.mia { background: #22304A; }
html[data-tema="scuro"] .modale-overlay > div,
html[data-tema="scuro"] .rosa-modal { background: #1A2130 !important; color: #E4E8EF; }
html[data-tema="scuro"] .rosa-modal h3,
html[data-tema="scuro"] .rosa-modal label { color: #E4E8EF; }
html[data-tema="scuro"] .trasferte-legacy .tl-tabella tr.riga-prato,
html[data-tema="scuro"] .trasferte-legacy table.tl-tabella tr.riga-prato { background: #22304A; }

/* Mappa Leaflet: piastrelle OSM un po' scurite, senza invertirle (restano leggibili) */
html[data-tema="scuro"] .trasferte-legacy .leaflet-tile-pane { filter: brightness(.78) contrast(1.05) saturate(.85); }
html[data-tema="scuro"] .trasferte-legacy .leaflet-popup-content-wrapper,
html[data-tema="scuro"] .trasferte-legacy .leaflet-popup-tip { background: #1A2130; color: #E4E8EF; }

/* Colori negli attributi style="" delle pagine (niente da toccare nei .php) */
html[data-tema="scuro"] .trasferte-legacy [style*="color:#6a7386"],
html[data-tema="scuro"] .trasferte-legacy [style*="color: #6a7386"],
html[data-tema="scuro"] .trasferte-legacy [style*="color:#8b93a3"],
html[data-tema="scuro"] .trasferte-legacy [style*="color:#8B93A3"],
html[data-tema="scuro"] .trasferte-legacy [style*="color:#B0806f"] { color: #97A1B2 !important; }
html[data-tema="scuro"] .trasferte-legacy [style*="color:#4B5568"],
html[data-tema="scuro"] .trasferte-legacy [style*="color:#20293A"] { color: #C3CAD6 !important; }
html[data-tema="scuro"] .trasferte-legacy [style*="background:#fff"],
html[data-tema="scuro"] .trasferte-legacy [style*="background:#FBF9F3"] { background: #1A2130 !important; }
html[data-tema="scuro"] .trasferte-legacy [style*="color:#2f8f46"] { color: #5FC27A !important; }
html[data-tema="scuro"] .trasferte-legacy [style*="color:#c23b3b"] { color: #F07070 !important; }
/* I marker della mappa restano con cerchio bianco: il logo si legge meglio */
html[data-tema="scuro"] .leaflet-marker-icon [style*="background:#fff"] { background: #fff !important; }

/* Testi colorati "a mano" nel CSS (generati da stile.css): schiariti per il fondo scuro */
html[data-tema="scuro"] .trasferte-legacy h1.tl-title em,
html[data-tema="scuro"] .trasferte-legacy .chip button:hover,
html[data-tema="scuro"] .trasferte-legacy .cl-item.custom span.rm:hover,
html[data-tema="scuro"] .trasferte-legacy .badge2.rinviata { color: #F08A72; }
html[data-tema="scuro"] .trasferte-legacy .tl-eyebrow,
html[data-tema="scuro"] .trasferte-legacy .homecard b,
html[data-tema="scuro"] .trasferte-legacy .lookup-result .lr-num,
html[data-tema="scuro"] .trasferte-legacy .roster-grid .rg-num,
html[data-tema="scuro"] .trasferte-legacy .stat b,
html[data-tema="scuro"] .trasferte-legacy .tag-date,
html[data-tema="scuro"] .trasferte-legacy .addcl button,
html[data-tema="scuro"] .trasferte-legacy .maplink,
html[data-tema="scuro"] .trasferte-legacy .linkrow a,
html[data-tema="scuro"] .trasferte-legacy .linkrow button,
html[data-tema="scuro"] .trasferte-legacy .pulsante2.chiaro,
html[data-tema="scuro"] .trasferte-legacy .bmsg-autore,
html[data-tema="scuro"] .trasferte-legacy .bmsg.mio .bmsg-autore,
html[data-tema="scuro"] .trasferte-legacy .bmsg-chev,
html[data-tema="scuro"] .trasferte-legacy .tl-calendario .cal-nostra,
html[data-tema="scuro"] .trasferte-legacy .tl-classifica .cl-pos,
html[data-tema="scuro"] .trasferte-legacy .tl-marcatori .cl-pos,
html[data-tema="scuro"] .trasferte-legacy .sq-nostra,
html[data-tema="scuro"] .trasferte-legacy .albh-risultato,
html[data-tema="scuro"] .trasferte-legacy .amsg-autore,
html[data-tema="scuro"] .trasferte-legacy .amsg-chev,
html[data-tema="scuro"] .trasferte-legacy .reaz-elenco summary { color: #5AA2EE; }
html[data-tema="scuro"] .trasferte-legacy .tl-sub,
html[data-tema="scuro"] .trasferte-legacy .tag-place,
html[data-tema="scuro"] .trasferte-legacy .field label,
html[data-tema="scuro"] .trasferte-legacy .avviso2,
html[data-tema="scuro"] .trasferte-legacy .albh-quando,
html[data-tema="scuro"] .trasferte-legacy .albh-marcatori,
html[data-tema="scuro"] .trasferte-legacy .reaz-chip .reaz-n,
html[data-tema="scuro"] .trasferte-legacy .reaz-gruppo,
html[data-tema="scuro"] .trasferte-legacy .notizia-estratto { color: #B3BCCB; }
html[data-tema="scuro"] .trasferte-legacy .lookup-result .lr-empty,
html[data-tema="scuro"] .trasferte-legacy .mapcaption,
html[data-tema="scuro"] .trasferte-legacy .region-count,
html[data-tema="scuro"] .trasferte-legacy .tag-meta,
html[data-tema="scuro"] .trasferte-legacy .chev,
html[data-tema="scuro"] .trasferte-legacy .chip button,
html[data-tema="scuro"] .trasferte-legacy .cl-item.custom span.rm,
html[data-tema="scuro"] .trasferte-legacy footer.tl-foot,
html[data-tema="scuro"] .trasferte-legacy table.tl-tabella th,
html[data-tema="scuro"] .trasferte-legacy .badge2.programmata,
html[data-tema="scuro"] .trasferte-legacy .bmsg-meta,
html[data-tema="scuro"] .trasferte-legacy .bmsg.aperto .bmsg-meta,
html[data-tema="scuro"] .trasferte-legacy .banteprima button,
html[data-tema="scuro"] .trasferte-legacy .tl-calendario .cal-quando,
html[data-tema="scuro"] .trasferte-legacy .tl-classifica .cl-riassunto,
html[data-tema="scuro"] .trasferte-legacy .tl-marcatori .cl-riassunto,
html[data-tema="scuro"] .trasferte-legacy .apager-conteggio,
html[data-tema="scuro"] .trasferte-legacy .amsg-meta,
html[data-tema="scuro"] .trasferte-legacy .notizie-widget-meta,
html[data-tema="scuro"] .trasferte-legacy .st-forma-nota,
html[data-tema="scuro"] .trasferte-legacy .sond-meta,
html[data-tema="scuro"] .trasferte-legacy .pr-nota,
html[data-tema="scuro"] .trasferte-legacy .pronostico-box .pr-data { color: #97A1B2; }
html[data-tema="scuro"] .trasferte-legacy .stat span,
html[data-tema="scuro"] .trasferte-legacy .st-bar-label,
html[data-tema="scuro"] .trasferte-legacy .st-split-legend { color: #A7B0BF; }
html[data-tema="scuro"] .trasferte-legacy .badge2.terminata,
html[data-tema="scuro"] .trasferte-legacy .st-hero-card.st-plain .st-hero-label { color: #8DB583; }
html[data-tema="scuro"] .trasferte-legacy .bmsg-quando,
html[data-tema="scuro"] .trasferte-legacy .tl-calendario .cal-chevron,
html[data-tema="scuro"] .trasferte-legacy .amsg-quando { color: #8E98AA; }

/* Controlli Leaflet: restano chiari, testi scuri come in origine */
html[data-tema="scuro"] .leaflet-container a { color: #20293A; }
html[data-tema="scuro"] .trasferte-legacy .linkrow a:hover,
html[data-tema="scuro"] .trasferte-legacy .linkrow button:hover { color: #fff; }

/* Colori con variabile scritti negli attributi style="" (es. "2°" in dashboard, "Elimina") */
html[data-tema="scuro"] .trasferte-legacy [style*="color:var(--cornflower)"] { color: #5AA2EE !important; }
html[data-tema="scuro"] .trasferte-legacy [style*="color:var(--thread)"] { color: #F08A72 !important; }
html[data-tema="scuro"] .trasferte-legacy [style*="color:var(--loden)"] { color: #8DB583 !important; }
/* Testi che hanno una regola propria nelle pagine (bacheca, pagine admin) */
html[data-tema="scuro"] .trasferte-legacy .bmsg-autore-nome { color: #5AA2EE; }
html[data-tema="scuro"] .trasferte-legacy th,
html[data-tema="scuro"] .trasferte-legacy label { color: #A7B0BF; }