/* Portale report · stile dell'interfaccia. Le pagine dentro la scheda hanno il loro (kit / kit_web). */
@font-face { font-family: "Playfair Display"; src: url("/fonts/Playfair.ttf"); font-weight: 400 700; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter.ttf"); font-weight: 100 900; }
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces.ttf"); font-weight: 100 900; }
@font-face { font-family: "Space Mono"; src: url("/fonts/SpaceMono-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Space Mono"; src: url("/fonts/SpaceMono-Bold.ttf"); font-weight: 700; }

:root {
  --crema: #F7F2E8; --fondo: #EDE7DA; --carta: #FFFDF9; --inchiostro: #141414;
  /* grigio delle etichette: piu' scuro del #8C8578 del PDF, per il contrasto a schermo */
  --muto: #6C665C;
  --riga: #D8D1C2; --accento: #B3122F; --serif: "Playfair Display", Georgia, serif;
  --sans: Inter, Helvetica, Arial, sans-serif; --mono: "Space Mono", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--inchiostro); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

.eyebrow { font: 700 10px/1 var(--mono); letter-spacing: .2em; color: var(--accento); display: flex; align-items: center; gap: 8px; }

/* ---- struttura ---- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lato { background: var(--crema); border-right: 1px solid var(--riga); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
/* la tessera della squadra: fondo nel colore del club (con una luce in diagonale), stemma su un disco
   bianco, nome e stagione. Con i colori chiari (.chiaro) il testo passa a scuro */
.marchio { margin: 10px 10px 4px; padding: 14px 12px 16px; border-radius: 14px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%), linear-gradient(160deg, var(--accento), color-mix(in srgb, var(--accento) 72%, #000));
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accento) 80%, #000); }
.marchio .eyebrow { color: rgba(255,255,255,.78); min-width: 0; }
/* il foglio delle pagine mette un quadratino davanti a ogni .eyebrow: nella tessera no */
.marchio .eyebrow::before { content: none; }
.squadra-riga { margin-top: 14px; display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.squadra-testo { min-width: 0; flex: 1; }
.scudo { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); }
.logo { width: 38px; height: 38px; object-fit: contain; }
.marchio .squadra { color: #fff; font-size: 18px; line-height: 1.15; }
.marchio select.squadra { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E"); }
.marchio select.squadra option { color: var(--inchiostro); }
.stagione { font: 700 9.5px var(--mono); letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: rgba(255,255,255,.78); margin-top: 5px; }
.marchio.chiaro { color: var(--inchiostro); }
.marchio.chiaro .eyebrow, .marchio.chiaro .stagione { color: rgba(20,20,20,.65); }
.marchio.chiaro .squadra { color: var(--inchiostro); }
.logo-chip { width: 18px; height: 18px; object-fit: contain; }
.squadra { width: 100%; min-width: 0; font: 700 17px/1.15 var(--serif); background: transparent; border: 0; padding: 0; color: var(--inchiostro); text-overflow: ellipsis; }
select.squadra { appearance: none; cursor: pointer; padding-right: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%238C8578' stroke-width='1.6'/%3E%3C/svg%3E") right center / 12px no-repeat; }
.sezioni { padding: 6px 10px; overflow: auto; flex: 1; }
.sezioni button { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 5px 10px; color: #3A3733; font-size: 13.5px; line-height: 1.35; }
.sezioni button:hover { background: rgba(20,20,20,.05); }
.sezioni button.on { background: color-mix(in srgb, var(--accento) 11%, transparent); color: var(--accento); font-weight: 600; }
.sezioni button .num { font: 700 9.5px var(--mono); color: var(--muto); margin-right: 8px; }
.sezioni button.on .num { color: var(--accento); opacity: .7; }
.piede { padding: 8px 14px 8px 20px; border-top: 1px solid var(--riga); display: flex; align-items: center; gap: 10px; color: var(--muto); font-size: 12px; }
.piede a { margin-left: auto; }

.centro { min-width: 0; }

/* ---- barra in alto: 1a riga i comandi (partite, scelte rapide, filtri di gara),
   2a riga il contesto (periodo guardato, filtri attivi, viste della pagina) ---- */
.barra { display: flex; flex-direction: column; gap: 9px; padding: 12px 20px 10px; background: var(--crema); border-bottom: 1px solid var(--riga); position: sticky; top: 0; z-index: 5; }
.barra .riga { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; min-width: 0; }
.barra .destra { margin-left: auto; }
.riga-contesto { padding-top: 9px; border-top: 1px solid rgba(216,209,194,.6); min-height: 40px; }
.etichetta { font: 700 9.5px var(--mono); letter-spacing: .18em; color: var(--muto); }
.destra { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tendina { flex: none; }

/* pulsanti a "binario": un fondo leggero, la scelta attiva e' una pastiglia chiara con il colore del club.
   Stesso aspetto per scelte rapide, tempo/spezzoni/risultato e viste della pagina */
.rapidi, .segmenti { display: inline-flex; flex: none; gap: 2px; padding: 3px; background: rgba(20,20,20,.05); border-radius: 10px; }
.rapidi button, .segmenti button { border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; font-size: 13px; color: #4A463F; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.rapidi button:hover, .segmenti button:hover { color: var(--inchiostro); background: rgba(255,255,255,.55); }
.rapidi button.on, .segmenti button.on { background: var(--carta); color: var(--accento); font-weight: 600; box-shadow: 0 1px 2px rgba(20,20,20,.14), 0 0 0 1px rgba(20,20,20,.04); }
.rapidi button.vuota { opacity: .35; pointer-events: none; }
/* finestre strette (menu aperto su un portatile piccolo): pulsanti un po' piu' compatti */
@media (max-width: 1180px) { .barra { padding-left: 14px; padding-right: 14px; } .rapidi button { padding: 5px 8px; font-size: 12.5px; } }

/* i due menu a tendina (partite, filtri di gara) */
.filtri-box { position: relative; flex: none; }
.apri-filtri { display: inline-flex; align-items: center; gap: 8px; background: var(--carta); border: 1px solid var(--riga); border-radius: 10px; padding: 7px 13px; font-size: 13px; font-weight: 500; color: var(--inchiostro); transition: border-color .15s, box-shadow .15s; }
.apri-filtri svg { color: var(--muto); flex: none; }
.apri-filtri:hover, .apri-filtri[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accento) 55%, var(--riga)); box-shadow: 0 2px 8px -3px rgba(20,20,20,.18); }
.n-filtri { background: var(--accento); color: #fff; border-radius: 999px; font: 700 10px/1 var(--mono); padding: 3px 6px; }
.pannello-filtri { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; background: var(--carta); border: 1px solid var(--riga); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(20,20,20,.28); padding: 16px 18px; display: grid; gap: 14px; width: max-content; }
.gruppo-filtri { display: grid; gap: 7px; }
.gruppo-filtri .segmenti { justify-self: start; }
.nota-filtri { margin: 0; font-size: 12px; color: var(--muto); max-width: 420px; }
body.modo-singolo .apri-filtri { opacity: .55; }

/* il periodo guardato: un pallino per partita, le giornate, il bilancio e i gol */
.forma { display: flex; align-items: center; gap: 14px; flex: none; }
.pallini { display: flex; gap: 4px; }
.pallino-forma { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); --c: #A89F8E; transition: transform .12s; }
.pallino-forma.esito-V { --c: #2F855A; } .pallino-forma.esito-S { --c: #C0392B; }
.pallino-forma.on { background: var(--c); }
.pallino-forma:hover { transform: scale(1.3); }
.forma-testo { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--muto); white-space: nowrap; }
.forma-testo b { color: var(--inchiostro); font-weight: 600; font-size: 13px; }
.forma-testo span::before { content: "·"; margin-right: 10px; color: var(--riga); }
.forma-testo i { font-style: normal; font-weight: 500; }
.forma-testo i.esito-V { color: #2F855A; } .forma-testo i.esito-S { color: #C0392B; } .forma-testo i.esito-P { color: #6C665C; }

/* i filtri attivi: gettoni con la x */
.filtri-attivi { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.filtri-attivi:empty { display: none; }
.gettone { display: inline-flex; align-items: center; gap: 6px; flex: none; background: color-mix(in srgb, var(--accento) 9%, var(--carta)); border: 1px solid color-mix(in srgb, var(--accento) 30%, transparent); border-radius: 999px; padding: 3px 7px 3px 11px; font-size: 12px; color: var(--inchiostro); }
.gettone span { font-size: 14px; line-height: 1; color: var(--muto); }
.gettone:hover { border-color: var(--accento); } .gettone:hover span { color: var(--accento); }
.azzera { background: transparent; border: 0; padding: 4px 2px; color: var(--muto); font-size: 12px; flex: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--riga); }
.azzera:hover { color: var(--accento); text-decoration-color: currentColor; }
.indietro { background: var(--accento); color: #fff; border: 0; border-radius: 9px; padding: 6px 13px; font-size: 12.5px; font-weight: 500; flex: none; }
.indietro:hover { filter: brightness(.92); }

/* ---- contenuto ---- */
.contenuto { padding: 10px 10px 24px; }
.testa-pagina { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.testa-pagina h2 { font: 400 22px var(--serif); margin: 0; }
.viste:empty { display: none; }
.scheda { background: var(--crema); border-radius: 12px; box-shadow: 0 8px 30px rgba(20,20,20,.08); overflow: hidden; min-height: 200px; position: relative; }
.scheda > svg { width: 100%; height: auto; display: block; }
.scheda.caricando::after { content: ""; position: absolute; inset: 0; background: rgba(247,242,232,.55); }
.scheda .page { margin: 0 auto; }
.scheda.html { overflow: hidden; }
.scheda.html.interattiva { overflow: visible; height: auto !important; }
.scheda.html .page { transform-origin: top left; box-shadow: none !important; margin: 0 !important; height: auto !important; padding-bottom: 28px !important; }
.stato { padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--riga); color: var(--muto); margin-bottom: 14px; }
.stato.errore { color: var(--accento); border-color: var(--accento); }
.badge-pdf { position: absolute; top: 10px; right: 12px; font: 700 9px var(--mono); letter-spacing: .15em; color: var(--muto); background: rgba(255,255,255,.7); border: 1px solid var(--riga); border-radius: 999px; padding: 4px 8px; }

/* ---- login ---- */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lato { position: static; height: auto; }
  .sezioni { display: flex; overflow-x: auto; gap: 4px; }
  .sezioni button { white-space: nowrap; width: auto; }
  .barra { position: static; }
}
/* l'etichetta della tessera: il nome del portale nel carattere del titolo dell'accesso */
/* il marchio FLOWTHEGAME nella tessera: simbolo + scritta del grafico, bianco sui colori
   scuri e scuro sulle tessere chiare (.chiaro) */
.fia-nome { display: block; line-height: 0; opacity: .9; }
.fia-nome img { height: 15px; width: auto; }
.fia-nome .ftg-scuro, .marchio.chiaro .fia-nome .ftg-chiaro { display: none; }
.marchio.chiaro .fia-nome .ftg-scuro { display: inline; }

/* ---- amministrazione ---- */
.admin-menu { flex: none; border-top: 1px solid var(--riga); padding-top: 8px; }
.modulo-admin fieldset.tutto .lista-squadre { opacity: .4; pointer-events: none; }
.admin-menu .etichetta { padding: 2px 10px 4px; }
.admin h2 { font: 400 22px var(--serif); margin: 0 0 14px; }
.admin .griglia-admin { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.tabella { width: 100%; border-collapse: collapse; background: var(--carta); border: 1px solid var(--riga); border-radius: 12px; overflow: hidden; }
.tabella th { text-align: left; font: 700 9.5px var(--mono); letter-spacing: .16em; color: var(--muto); padding: 10px 12px; border-bottom: 1px solid var(--riga); background: var(--crema); }
.tabella td { padding: 10px 12px; border-bottom: 1px solid var(--riga); font-size: 13px; vertical-align: top; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tr.scelto td { background: rgba(20,20,20,.04); }
.tabella .mono { font: 11px var(--mono); color: var(--muto); }
.tabella .pill { display: inline-block; font: 700 9px var(--mono); letter-spacing: .12em; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--riga); color: var(--muto); margin: 1px 2px 1px 0; }
.tabella .pill.forte { background: var(--inchiostro); color: var(--crema); border-color: var(--inchiostro); }
.tabella .pill.spento { opacity: .5; text-decoration: line-through; }
.tabella button.mini { background: transparent; border: 1px solid var(--riga); border-radius: 6px; padding: 3px 8px; font-size: 12px; }
.tabella button.mini:hover { border-color: var(--inchiostro); }
.modulo-admin { background: var(--carta); border: 1px solid var(--riga); border-radius: 12px; padding: 18px; position: sticky; top: 140px; }
.modulo-admin h3 { font: 400 18px var(--serif); margin: 0 0 12px; }
.modulo-admin label { display: block; margin-bottom: 10px; font-size: 13px; }
.modulo-admin label > span { display: block; font: 700 9.5px var(--mono); letter-spacing: .16em; color: var(--muto); margin-bottom: 4px; }
.modulo-admin input[type=text], .modulo-admin input[type=password], .modulo-admin select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--riga); border-radius: 8px; background: #fff; font: 13.5px var(--sans); }
.modulo-admin .riga-check { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.modulo-admin .riga-check label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.modulo-admin .azioni { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.modulo-admin .primario { background: var(--inchiostro); color: var(--crema); border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 600; }
.modulo-admin .secondario { background: transparent; border: 1px solid var(--riga); border-radius: 8px; padding: 8px 14px; }
.modulo-admin .pericolo { margin-left: auto; background: transparent; border: 0; color: #A3202B; font-size: 12.5px; }
.modulo-admin .esito { font-size: 12.5px; color: var(--muto); margin-top: 8px; }
.modulo-admin .esito.errore { color: #A3202B; }
.modulo-admin fieldset { border: 1px solid var(--riga); border-radius: 8px; padding: 8px 10px 10px; margin: 0 0 10px; }
.modulo-admin legend { font: 700 9.5px var(--mono); letter-spacing: .16em; color: var(--muto); padding: 0 4px; }
.modulo-admin .lista-squadre { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 10px; margin-top: 6px; }
.modulo-admin .lista-squadre label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; }
.modulo-admin .lista-squadre img { width: 16px; height: 16px; object-fit: contain; }

/* ---- pagine web in HTML (stessi stili delle pagine del PDF, ma fluide) ---- */
.pagina-web { padding: 24px 32px 22px; font-family: Inter; color: var(--inchiostro); }
.pagina-web .crus-body { margin-top: 8px; }
.pagina-web .crus-riga { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pagina-web .tile { min-width: 0; }
.pagina-web .tile.compatta { min-height: 0; }
.pagina-web .tile { min-height: 0; justify-content: flex-start; transition: box-shadow .2s, transform .2s; }
.pagina-web .tile:hover { box-shadow: 0 10px 24px -14px rgba(20,20,20,.35); transform: translateY(-1px); }
.pagina-web .barre-partite { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 6px; border-bottom: 1px solid var(--riga); }
.pagina-web .barre-partite .barra-partita { flex: 1; min-height: 3px; opacity: .35; border-radius: 2px 2px 0 0; cursor: pointer; transition: opacity .15s; }
.pagina-web .barre-partite .barra-partita:hover, .pagina-web .barre-partite .barra-partita.on { opacity: 1; }
/* fin dove arriva la palla: la fila di barrette gara per gara, alta uguale con 5 o 30 partite */
.pagina-web .barre-partite.ef2-gare { height: 52px; margin-top: 8px; }
/* sotto le barre: media Serie A a sinistra, min e max a destra, sulla stessa riga */
/* sotto le barre una riga sola: "MEDIA SERIE A 66,8" a sinistra, "min 53 · max 62" a destra. Caratteri e
   spaziature sono tarati per starci anche nelle tessere strette (~230px, finestra da 1280); solo sotto
   quella misura "min · max" va a capo invece di uscire dal riquadro */
.pagina-web .tile-piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 6px; margin-top: 5px; min-width: 0; }
.pagina-web .tile-piede .camp { letter-spacing: .3px; }
.pagina-web .tile-piede .camp b { font-size: 12px; }
.pagina-web .tile-piede .sotto { font-size: 12px; }
/* la tessera misura se stessa: sotto i 250px "min 53 · max 62" si scrive su due righe piccole,
   una sopra l'altra ("min 53" / "max 62"), alte quanto la riga della media Serie A */
.pagina-web .crus-riga .tile { container-type: inline-size; }
.pagina-web .mm-corto { display: none; }
@container (max-width: 250px) {
  .pagina-web .mm-lungo { display: none; }
  .pagina-web .mm-corto { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: 10px; line-height: 1.05; }
  .pagina-web .mm-corto b { font-weight: 600; color: #4A463F; }
  .pagina-web .tile-piede { align-items: center; }
}
.pagina-web .tile-piede .camp, .pagina-web .tile-piede .sotto { margin: 0; white-space: nowrap; }
.scheda.html .pagina-web { transform: none !important; }
@media (max-width: 1100px) { .pagina-web .crus-riga { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* partita singola: i filtri di tempo/spezzone/risultato non sono ancora applicati alle pagine di gara */
body.modo-singolo #tempo, body.modo-singolo #spezzoni, body.modo-singolo #stati { opacity: .35; pointer-events: none; }
.scheda .note:empty { display: none; }

/* ---- modello di gioco ---- */
.pagina-web .tp-ciambelle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; justify-items: center; }
.pagina-web .tp-blocco { display: flex; flex-direction: column; align-items: center; }
.pagina-web .tp-tit { font-family: "Space Mono"; font-size: 12px; font-weight: 700; letter-spacing: 2.2px; margin-bottom: 4px; }
.pagina-web .ciambella .settore { cursor: pointer; transition: opacity .18s, transform .18s; transform-origin: center; }
.pagina-web.con-fuoco .settore:not(.fuoco), .pagina-web.con-fuoco .tp-voce:not(.fuoco) { opacity: .25; }
.pagina-web .settore.fuoco { transform: scale(1.035); }
.pagina-web .tp-legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 18px; max-width: 900px; }
.pagina-web .tp-legenda-tit { font-family: "Space Mono"; font-size: 12px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 10px; }
.pagina-web .tp-cap { float: right; font-weight: 400; letter-spacing: 1.2px; font-size: 9.5px; color: var(--muto); }
.pagina-web .tp-voce { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; margin: 0 -8px 2px; border-radius: 8px; cursor: pointer; transition: opacity .18s, background .15s; }
.pagina-web .tp-voce:hover, .pagina-web .tp-voce.fissa { background: rgba(20,20,20,.05); }
.pagina-web .tp-voce .sw { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.pagina-web .tp-voce .pct { font-weight: 700; font-size: 14.5px; width: 42px; flex-shrink: 0; }
/* la quota media Serie A, sotto quella della squadra (interruttore "Con la media Serie A") */
.pagina-web .tp-voce .dett-a { font-weight: 700; color: #2E2B27; }
.pagina-web .anello { cursor: default; }
/* ---- modello di gioco contro la media Serie A ---- */
.pagina-web .cs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 14px; }
.pagina-web .cs-gruppi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; justify-items: center; }
.pagina-web .cs-gruppo { display: flex; flex-direction: column; align-items: center; }
.pagina-web .cs-gruppo .tp-tit { margin-bottom: 2px; }
.pagina-web .cs-nota { text-align: center; font: 400 9.5px var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muto); margin-top: 2px; }
.pagina-web .cs-torte { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 2px 0 4px; }
.pagina-web .cs-torta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pagina-web .cs-torta-a svg { opacity: .8; }
/* concentriche: stesso scenario acceso in tutte le torte e nella tabella */
.pagina-web .cs-sp, .pagina-web .cs-riga { transition: opacity .18s; }
/* modello di gioco con il confronto Serie A: anche il cerchio interno segue lo scenario acceso */
.pagina-web .settore-a { transition: opacity .18s; }
/* la legenda nel confronto: quota squadra, scenario, quota Serie A, scarto in punti */
.pagina-web .tp-voce-a { align-items: center; }
.pagina-web .tp-voce-a .tp-a { width: 52px; flex-shrink: 0; text-align: right; font-size: 14.5px; color: var(--muto); }
.pagina-web .tp-voce-a .tp-d { width: 52px; flex-shrink: 0; text-align: right; font: 400 18px "Playfair Display", serif; }
.pagina-web .tp-legenda-a { display: flex; align-items: baseline; gap: 10px; }
.pagina-web .tp-legenda-a > span:first-child { flex: 1; }
.pagina-web .tp-legenda-a .tp-cap { float: none; }
.pagina-web .tp-legenda-a .tp-cap:nth-child(2), .pagina-web .tp-legenda-a .tp-cap-r { display: none; }
.pagina-web .tp-legenda-a .tp-cap-a, .pagina-web .tp-legenda-a .tp-cap-d { width: 52px; text-align: right; white-space: nowrap; letter-spacing: .8px; }
.pagina-web.con-fuoco .settore-a:not(.fuoco) { opacity: .25; }
/* confronto concentrico per lo staff: torta e, accanto, l'elenco degli scenari */
/* le due fasi una sotto l'altra: torta a sinistra, elenco largo a destra */
.pagina-web .cc-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.pagina-web .cc-blocco { display: flex; align-items: center; gap: 40px; }
.pagina-web .cc-torta .tp-legenda-tit { margin-bottom: 2px; text-align: center; }
.pagina-web .cc-corpo { flex: 1; min-width: 0; max-width: 680px; }
.pagina-web .cc-torta { flex: none; }
.pagina-web .cc-lista { flex: 1; min-width: 0; }
.pagina-web .cc-testa, .pagina-web .cc-riga { display: grid; grid-template-columns: 12px minmax(0, 1fr) 90px 110px 90px; align-items: center; gap: 12px; }
.pagina-web .cc-testa { font: 400 9px var(--mono); letter-spacing: 1px; color: var(--muto); padding-bottom: 5px; border-bottom: 1.6px solid #141414; white-space: nowrap; }
.pagina-web .cc-testa span:nth-child(n+3) { text-align: right; }
.pagina-web .cc-riga { padding: 7px 0; border-bottom: 1px solid #E8E2D4; cursor: default; transition: opacity .18s; }
.pagina-web .cc-riga .sw { width: 12px; height: 12px; }
.pagina-web .cc-nome { font-size: 13.5px; line-height: 1.25; color: #2E2B27; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pagina-web .cc-q { text-align: right; font-weight: 700; font-size: 15px; }
.pagina-web .cc-a { text-align: right; font-size: 13px; color: var(--muto); }
.pagina-web .cc-d { text-align: right; font: 400 18px "Playfair Display", serif; white-space: nowrap; }
.pagina-web .cc-d i { font-style: normal; font-size: 10px; margin-right: 3px; vertical-align: 2px; }
.pagina-web .cc-d.piu i { color: #1D7A3E; } .pagina-web .cc-d.meno i { color: #A3202B; }
.pagina-web.cs-fuoco .cc-riga[data-cs]:not(.fuoco) { opacity: .3; }
.pagina-web .cc-riga.fuoco { background: rgba(20,20,20,.04); }
@media (max-height: 820px) { .pagina-web .cc-riga { padding: 5px 0; } }
.pagina-web.cs-fuoco [data-cs]:not(.fuoco) { opacity: .22; }
.pagina-web .cs-riga.fuoco { background: rgba(20,20,20,.05); }
.pagina-web .cs-leg { display: flex; justify-content: center; gap: 28px; font-size: 12px; color: var(--muto); margin: 2px 0 4px; }
.pagina-web .cs-leg span { display: inline-flex; align-items: center; gap: 8px; }
.pagina-web .cs-leg i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; }
.pagina-web .cs-leg-est { border: 5px solid #2E2B27; }
.pagina-web .cs-leg-int { border: 3px solid #B5AFA4; width: 12px !important; height: 12px !important; margin: 2px; }
.pagina-web .cs-cap { font: 700 9.5px var(--mono); letter-spacing: 1.6px; color: var(--muto); }
.pagina-web .cs-testa, .pagina-web .cs-riga { display: grid; grid-template-columns: 12px minmax(0, 1.5fr) minmax(0, 1fr) 62px 52px 44px; align-items: center; gap: 10px; }
.pagina-web .cs-testa { white-space: nowrap; font: 400 9px var(--mono); letter-spacing: 1px; color: var(--muto); text-transform: uppercase; padding-bottom: 5px; border-bottom: 1.6px solid #141414; }
.pagina-web .cs-testa span:nth-child(n+4) { text-align: right; }
.pagina-web .cs-riga { padding: 7px 0; border-bottom: 1px solid #E8E2D4; font-size: 12.5px; cursor: default; }
.pagina-web .cs-riga:hover { background: rgba(20,20,20,.035); }
.pagina-web .cs-riga .sw { width: 12px; height: 12px; }
.pagina-web .cs-nome { color: #2E2B27; line-height: 1.25; }
.pagina-web .cs-barra { position: relative; height: 12px; background: #EFE9DC; }
.pagina-web .cs-barra i { display: block; height: 100%; }
.pagina-web .cs-barra b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #141414; }
.pagina-web .cs-q { text-align: right; font-weight: 700; }
.pagina-web .cs-a { text-align: right; color: var(--muto); }
.pagina-web .cs-d { text-align: right; font-family: "Playfair Display", serif; font-size: 16px; }
@media (max-height: 820px) { .pagina-web .cs-riga { padding: 5px 0; } .pagina-web .cs-torte { margin: 0 0 6px; } }
.pagina-web .tp-voce .nome { font-size: 14.5px; display: block; }
.pagina-web .tp-voce .dett { font-family: "Space Mono"; font-size: 11px; color: var(--muto); display: block; margin-top: 2px; }
.pagina-web .tp-voce .testo { flex: 1; }
.pagina-web .tp-voce .med { font-family: "Playfair Display"; font-size: 16px; line-height: 1; flex-shrink: 0; margin-left: 8px; }
.pagina-web .tp-voce .meds { font-family: "Space Mono"; font-size: 10px; margin-left: 1px; }
.pagina-web .tp-dett { margin-top: 22px; padding: 16px 18px; background: #fff; border: 1px solid var(--riga); border-radius: 10px; animation: entra .3s ease; }
.pagina-web .tp-dett-tit { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.pagina-web .tp-dett-tit .sw { width: 12px; height: 12px; }
.pagina-web .tp-dett-sub { font-weight: 400; color: var(--muto); font-size: 12.5px; margin-left: 6px; }
.pagina-web .tp-colonne { display: flex; gap: 18px; align-items: stretch; height: 150px; }
.pagina-web .tp-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.pagina-web .tp-col .barra-partita { width: 60%; max-width: 90px; min-height: 3px; border-radius: 3px 3px 0 0; opacity: .8; cursor: pointer; transition: opacity .15s; }
.pagina-web .tp-col .barra-partita:hover { opacity: 1; }
.pagina-web .tp-col-val { font-family: "Playfair Display"; font-size: 14px; margin-bottom: 4px; }
.pagina-web .tp-col-lab { font-family: "Space Mono"; font-size: 9.5px; letter-spacing: .6px; color: var(--muto); margin-top: 6px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@keyframes entra { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (max-width: 1100px) { .pagina-web .tp-ciambelle, .pagina-web .tp-legende { grid-template-columns: 1fr; } }

/* ---- imbuto ---- */
/* la colonna delle scritte a destra resta stretta: lo spazio e' dell'imbuto */
.pagina-web .ef2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; margin-top: 4px; }
.pagina-web .ef2-b { border-top: 1.6px solid #141414; padding-top: 8px; margin-bottom: 12px; }
.pagina-web .ef2-t { font-family: "Playfair Display", serif; font-size: 19px; margin-bottom: 8px; }
.pagina-web .ef2-riga { display: flex; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #E8E2D4; }
.pagina-web .ef2-testa { border-bottom: none; padding-bottom: 2px; }
.pagina-web .ef2-mono { font-family: "Space Mono", monospace; font-size: 9.4px; letter-spacing: 1.4px; color: var(--muto); font-weight: 400; }
.pagina-web .ef2-lab { flex: 1; font-size: 13.2px; color: #2E2B27; }
.pagina-web .ef2-a { width: 96px; text-align: right; font-weight: 700; font-size: 14px; }
.pagina-web .ef2-b2 { width: 92px; text-align: right; font-size: 14px; color: #6E6A62; }
.pagina-web .ef2-q { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.pagina-web .ef2-qn { font-family: "Playfair Display", serif; font-size: 29px; }
.pagina-web .ef2-ql { font-family: "Space Mono", monospace; font-size: 9.4px; letter-spacing: 1.6px; color: var(--muto); }
.pagina-web .ef2-qd { margin-left: auto; font-size: 11.2px; color: var(--muto); }
.pagina-web .ef2-qbar { height: 9px; background: #E8E2D4; margin-top: 5px; }
.pagina-web .ef2-qbar span { display: block; height: 9px; }
.pagina-web .ef2-g2 { display: flex; align-items: center; gap: 10px; margin-top: 3px; padding: 3px 6px; margin-left: -6px; margin-right: -6px; border-radius: 6px; font-size: 12.8px; color: #2E2B27; cursor: pointer; }
.pagina-web .ef2-g2:hover { background: rgba(20,20,20,.05); }
.pagina-web .ef2-g2n { width: 78px; flex-shrink: 0; }
.pagina-web .ef2-g2b { flex: 1; height: 9px; background: #E8E2D4; }
.pagina-web .ef2-g2b i { display: block; height: 9px; }
.pagina-web .ef2-g2v { width: 38px; text-align: right; font-weight: 700; color: #141414; }
.pagina-web .ef2-g2d { width: 46px; text-align: right; font-family: "Space Mono", monospace; font-size: 10.4px; color: var(--muto); }
.pagina-web .ef2-tit-mono { font-family: "Space Mono", monospace; font-size: 9.4px; letter-spacing: 1.8px; color: var(--muto); margin-bottom: 8px; }
.pagina-web .gradino { border-radius: 8px; padding: 4px 0; cursor: default; transition: background .15s; }
.pagina-web .gradino:hover { background: rgba(20,20,20,.04); }
.pagina-web .id-wrap { max-width: 720px; margin: 0 auto; }
/* le barre dell'imbuto non si schiacciano: la larghezza e' la misura (vedi pagine_web._imbuto_doppio) */
.pagina-web .id-barra, .pagina-web .id-perse { flex-shrink: 0; }
@media (max-width: 1100px) { .pagina-web .ef2-grid { grid-template-columns: 1fr; } }

/* ---- dove si ferma la palla ---- */
.pagina-web .mp-sez { font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--muto); margin: 6px 0 10px; }
.pagina-web .es-wrap { margin-top: 6px; overflow-x: auto; }
.pagina-web .es-riga { display: block; white-space: nowrap; margin-bottom: 9px; }
.pagina-web .es-lab { display: inline-block; width: 200px; vertical-align: middle; white-space: normal; }
.pagina-web .es-nome { font-size: 14px; color: #2E2B27; font-weight: 600; }
.pagina-web .es-sotto { font-family: "Space Mono", monospace; font-size: 9.4px; letter-spacing: 1.2px; color: var(--muto); margin-top: 3px; }
.pagina-web .es-pre { display: inline-block; vertical-align: middle; width: 80px; text-align: right; margin-right: 14px; font-size: 13px; font-weight: 700; }
.pagina-web .es-barra { display: inline-block; vertical-align: middle; font-size: 0; width: 480px; }
.pagina-web .es-barra span { display: inline-block; height: 38px; line-height: 38px; text-align: center; font-size: 13px; font-weight: 600; vertical-align: top; position: relative; }
.pagina-web .es-barra span i { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-family: "Space Mono", monospace; font-size: 10px; line-height: 1; }
.pagina-web .es-tot { display: inline-block; vertical-align: middle; width: 96px; text-align: right; font-family: "Playfair Display", serif; font-size: 22px; margin-left: 22px; }
.pagina-web .es-tot i { display: block; font-family: "Space Mono", monospace; font-size: 8.8px; letter-spacing: 1.2px; color: var(--muto); font-style: normal; margin-top: 2px; }
.pagina-web .es-q { display: inline-block; vertical-align: middle; margin-left: 40px; font-family: "Playfair Display", serif; font-size: 20px; }
.pagina-web .es-q span { font-family: "Space Mono", monospace; font-size: 9px; letter-spacing: 1.4px; color: var(--muto); margin-left: 7px; }
.pagina-web .es-q em { display: block; font-style: normal; font-family: Inter, sans-serif; font-size: 11.4px; color: var(--muto); margin-top: 2px; }
.pagina-web .es-intesta { margin-bottom: 6px; }
.pagina-web .es-intesta div { font-family: "Space Mono", monospace; font-size: 8.6px; letter-spacing: 1.1px; color: var(--muto); }
.pagina-web .es-pre2 { display: inline-block; vertical-align: middle; width: 80px; margin-right: 14px; text-align: right; line-height: 1.2; white-space: normal; }
.pagina-web .es-tot2 { display: inline-block; vertical-align: middle; width: 96px; text-align: right; margin-left: 22px; line-height: 1.25; white-space: normal; }
.pagina-web .es-q2 { display: inline-block; vertical-align: middle; margin-left: 40px; }
.pagina-web .es-legenda { display: flex; gap: 22px; margin-top: 6px; }
.pagina-web .es-leg { display: flex; align-items: center; gap: 7px; font-size: 12.2px; color: #2E2B27; cursor: pointer; padding: 3px 8px; margin-left: -8px; border-radius: 6px; transition: opacity .15s, background .15s; }
.pagina-web .es-leg:hover, .pagina-web .es-leg.fissa { background: rgba(20,20,20,.05); }
.pagina-web .es-leg i { display: inline-block; width: 12px; height: 12px; }
.pagina-web .es-stacco { height: 14px; }
.pagina-web .es-seg { cursor: pointer; transition: opacity .18s, transform .18s; }
.pagina-web.con-esito .es-seg:not(.fuoco) { opacity: .18; }
.pagina-web.con-esito .es-leg:not(.fuoco) { opacity: .35; }
.pagina-web .es-seg.fuoco { transform: scaleY(1.08); z-index: 1; }

/* ---- eventi intensi */
.pagina-web .gioc-solo { margin-top: 6px; flex: 1; }
.pagina-web .gio-lista { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.pagina-web .gio-riga { display: grid; grid-template-columns: 210px 1fr 70px; align-items: center; gap: 18px; }
.pagina-web .gio-nome { font-size: 13.2px; }
.pagina-web .gio-partite { font-family: "Space Mono", monospace; font-size: 10.5px; color: #8C8578; margin-left: 8px; }
.pagina-web .gio-barre { display: flex; height: 20px; }
.pagina-web .gio-seg { display: flex; align-items: center; justify-content: center; font-family: Inter, sans-serif; font-weight: 700; font-size: 11px; color: #fff; overflow: hidden; transition: width .25s; cursor: pointer; }
.pagina-web .gio-seg.spento { width: 0 !important; }
.pagina-web .gio-seg span { pointer-events: none; }
.pagina-web .gio-tot { font-family: "Playfair Display", serif; font-size: 14px; text-align: right; }
.pagina-web .legenda { display: flex; gap: 22px; align-items: center; font-size: 12.5px; }
.pagina-web .legenda .swatch { display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; }
.pagina-web .gi-leg { cursor: pointer; } .pagina-web .gi-leg.off { opacity: .35; }
.pagina-web .gio-seg.muto span { visibility: hidden; }
.pagina-web .gio-riga.vuota { opacity: .35; }
.pagina-web .gi-soglia .tipel { border-bottom: 1px dotted currentColor; cursor: help; }
.modo { margin-right: 2px; }
.pagina-web .gi-soglia { font-size: 12px; color: #8C8578; margin: 10px 0 0; line-height: 1.45; max-width: 1100px; }
.pagina-web .gi-vuota { font-size: 14px; color: #5A554D; margin-top: 18px; }
.pagina-web .gi-nota { font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: 1px; color: #8C8578; text-transform: uppercase; margin-left: auto; }

/* ---- scelta dell'aspetto (prova): non tocca i dati, resta salvata nel browser ---- */

/* cruscotto: le tessere di confronto (noi contro le squadre affrontate) */
/* "31 vs 14": i due numeri uguali (stesso carattere e grandezza del valore), il secondo in grigio; "vs" piccolo */
.pagina-web .cf-vs { font: inherit; color: #6C665C; }
.pagina-web .cf-vs i { font: 400 .38em "Space Mono", monospace; font-style: normal; letter-spacing: .5px; margin: 0 .3em; vertical-align: .35em; }
.pagina-web .cf-barra { display: flex; height: 8px; margin-top: 8px; border-radius: 1px; overflow: hidden; }
.pagina-web .cf-vs { line-height: 1; }
.pagina-web .cf-note { display: flex; justify-content: space-between; font-family: "Space Mono", monospace; font-size: 9px; letter-spacing: .6px; color: var(--muto); margin-top: 5px; text-transform: uppercase; }
.pagina-web .cf-partite { gap: 7px; margin-top: 6px; height: 22px; }
.pagina-web .cf-coppia { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.pagina-web .cf-coppia .barra-partita { flex: 1; }
.pagina-web .crus-body .tile { padding: 12px 12px 10px 14px; }
.pagina-web .crus-body .tile .val { font-size: 34px; }
.pagina-web .crus-body .tile .sotto { margin-top: 4px; }

/* ---- partite e controlli ---- */
.admin-nota { color: var(--muto); font-size: 13px; margin: -6px 0 14px; max-width: 900px; }
.admin-nota .mono { font: 11px var(--mono); }
.pallino-stato { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.pallino-stato.verde { background: #1D7A3E; } .pallino-stato.rosso { background: #A3202B; }
.tabella-partite td:first-child { width: 22px; }
.tabella-partite .avvisi { margin: 0; padding-left: 16px; font-size: 12.5px; color: #7A2E1E; }
.tabella-partite .avvisi li { margin: 2px 0; }
.tabella-partite .ok { color: var(--muto); font-size: 12.5px; }

/* la riga "Serie A" nelle tessere della panoramica */
.pagina-web .tile .camp { font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: .6px; color: #6C665C; margin-top: 4px; text-transform: uppercase; }
.pagina-web .tile .camp b { font-family: Inter, sans-serif; font-size: 12px; letter-spacing: 0; }
.pagina-web .ef2-camp { margin-top: 6px; }

/* bozze */
.bozze-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 12px; }
.bozze-testa .etichetta { margin-bottom: 6px; }
.carica { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.carica .secondario { background: var(--carta); border: 1px solid var(--riga); border-radius: 8px; padding: 7px 14px; font-size: 13px; }
.carica:hover .secondario { border-color: var(--inchiostro); }
.carica .mono { font: 11px var(--mono); color: var(--muto); }
.anteprima-toggle { white-space: nowrap; font-size: 13px; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.riga-bozza td { background: rgba(179,18,47,.04); }
.bozza-azioni { margin-top: 8px; display: flex; gap: 6px; }
.bozza-azioni .mini { background: transparent; border: 1px solid var(--riga); border-radius: 6px; padding: 4px 10px; font-size: 12px; }
.bozza-azioni .mini.forte { background: var(--inchiostro); color: var(--crema); border-color: var(--inchiostro); }
.admin-esito { font-size: 13px; color: #1D7A3E; margin: -6px 0 12px; }
.anteprima-badge { flex: none; font: 700 9.5px var(--mono); letter-spacing: .18em; color: #fff; background: var(--accento); border-radius: 999px; padding: 4px 10px; }

/* panoramica della partita singola */
.pagina-web .pn-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
/* panoramica della partita singola: le tessere della panoramica del periodo, tre per fascia */
.pagina-web .crus-riga.pn-riga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pagina-web .pn-cf { display: flex; height: 8px; margin-top: 8px; border-radius: 1px; overflow: hidden; }
.pagina-web .pn-cf.doppia { gap: 6px; overflow: visible; } .pagina-web .pn-cf.doppia > div { flex: 1; display: flex; height: 8px; }
.pagina-web .pn-body { margin-top: 14px; }
.pagina-web .pn-body .crus-riga { margin-bottom: 18px; gap: 18px; }
.pagina-web .pn-nove { padding: 16px 18px 12px 18px !important; cursor: default; }
.pagina-web .pn-nove .val { font-size: 36px; color: var(--inchiostro); }
.pagina-web .pn-nove .pn-cf { margin-top: 14px; }
.pagina-web .pn-tile { padding: 20px 22px 16px; cursor: default; }
.pagina-web .pn-val { font-size: 36px; }
.pagina-web .pn-barra { display: flex; height: 10px; margin-top: 16px; }
.pagina-web .pn-barra.doppia { gap: 6px; } .pagina-web .pn-barra.doppia > div { flex: 1; display: flex; height: 10px; }
.pagina-web .pn-note { display: flex; justify-content: space-between; font-family: "Space Mono", monospace; font-size: 9px; letter-spacing: 1.2px; color: var(--muto); margin-top: 6px; text-transform: uppercase; }

/* "come cambia il modello": le due meta' si restringono con la finestra invece di uscire dalla scheda */
.pagina-web .mt-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 40px !important; }
.pagina-web .mt-col { min-width: 0 !important; }
.pagina-web .mt-riga { gap: 6px; }
.pagina-web .mt-r { width: clamp(28px, 3.2vw, 54px) !important; }
.pagina-web .es-fine { display: inline-block; vertical-align: middle; margin-left: 10px; font-family: "Playfair Display", serif; font-size: 20px; }

/* ---- "dove si ferma la palla": righe davvero elastiche. Prima le quattro colonne avevano larghezze
   fisse (190 + 96 + 600 + 222 px): sotto i ~1110px di spazio la parte destra usciva dalla scheda e
   finiva in uno scorrimento orizzontale che sul Mac non si vede (barre nascoste). Ora e' una griglia:
   nome e quota finale hanno un minimo e un massimo, la barra prende lo spazio che resta. ---- */
.pagina-web .es-wrap { overflow-x: visible; }
.pagina-web .es-riga { display: grid; grid-template-columns: minmax(96px, 190px) 84px minmax(280px, 720px) minmax(118px, 200px);
  align-items: center; column-gap: 16px; white-space: normal; }
.pagina-web .es-lab, .pagina-web .es-pre, .pagina-web .es-pre2, .pagina-web .es-q, .pagina-web .es-q2 { width: auto; margin: 0; }
.pagina-web .es-q, .pagina-web .es-q2 { line-height: 1.2; }
.pagina-web .es-q span { white-space: nowrap; display: inline-block; }
/* la barra: gli spicchi sono in percentuale della barra (al massimo ~83%), poi la somma */
.pagina-web .es-barra { display: flex; align-items: stretch; width: auto; min-width: 0; }
/* --f = quota dello spicchio rispetto alla barra piu' lunga; 84px restano per il totale ('30,6 a partita') */
.pagina-web .es-barra span { flex: none; width: calc((100% - 84px) * var(--f)); overflow: hidden; }
.pagina-web .es-intesta .es-barra { visibility: hidden; height: 1px; }
/* il numero dentro uno spicchio troppo stretto si nasconde (lo decide interattivo.js) */
.pagina-web .es-seg.muto { color: transparent !important; }
.pagina-web .es-barra .es-somma { flex: none; display: inline-block; vertical-align: top; height: 38px; margin-left: 10px; font-family: "Playfair Display", serif; font-size: 21px; line-height: 30px; color: #141414; font-weight: 400; width: auto; }
.pagina-web .es-barra .es-somma i { display: block; font-style: normal; line-height: 1; font-family: "Space Mono", monospace; font-size: 8.6px; letter-spacing: 1.2px; color: var(--muto); }
/* ---- telefono e tablet: menu in alto, pagine scorrevoli in orizzontale invece che rimpicciolite ---- */
@media (max-width: 900px) {
  .lato { height: auto; }
  .sezioni { padding: 6px 8px; }
  .barra { padding: 8px 10px; gap: 6px; }
  .contenuto { padding: 8px 6px 16px; }
  .scheda { border-radius: 8px; }
  html, body { overflow-x: hidden; }
  .app { grid-template-columns: minmax(0, 1fr); width: 100vw; }
  .lato, .centro, .sezioni, .barra { min-width: 0; max-width: 100vw; }
  .barra .riga { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .chips { flex-wrap: nowrap; }
  .barra .riga > *, .segmenti, .segmenti button, .rapidi, .rapidi button, .etichetta, .destra { flex: none; }
  .barra .riga { min-height: 0; }
  .rapidi { flex-wrap: nowrap; }
  .chip { white-space: nowrap; }
  .marchio { margin: 8px; padding: 10px 12px 10px; }
  .squadra-riga { margin-top: 6px; }
  .sezioni button { font-size: 12.5px; padding: 6px 8px; }
  .admin-menu { display: none; }
}


/* ---- le partite: menu a tendina ---- */
.riga-partite .tendina { flex: 1; min-width: 0; }
.pannello-elenco { left: 0; right: auto; width: 330px; max-height: 380px; overflow: auto; padding: 8px; gap: 0; }
.voce-elenco { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; border-radius: 7px; padding: 7px 8px; font-size: 13px; text-align: left; color: var(--muto); }
.voce-elenco:hover { background: rgba(20,20,20,.05); }
.voce-elenco.on { color: var(--inchiostro); }
.voce-elenco .spunta { width: 16px; height: 16px; border: 1.5px solid var(--riga); border-radius: 4px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.voce-elenco.on .spunta { background: var(--accento); border-color: var(--accento); }
.voce-elenco.on .spunta::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.voce-elenco .giornata { font: 700 10px var(--mono); color: var(--muto); width: 26px; }
.voce-elenco .dove { font-size: 11px; color: var(--muto); }
.voce-elenco .esito { margin-left: auto; font: 700 11px var(--mono); }
.voce-elenco.esito-V .esito { color: #1D7A3E; } .voce-elenco.esito-S .esito { color: #A3202B; }


/* ---- leggibilita' (erano le correzioni del tema "rivisto", ora di base) ---- */
.etichetta, .sezioni button .num { font-size: 10.5px; }
/* nelle pagine: il grigio delle etichette e i corpi minimi dei blocchi HTML */
svg text[fill="#8C8578"] { fill: #6C665C; }
.pagina-web .ef2-mono, .pagina-web .ef2-ql, .pagina-web .ef2-tit-mono, .pagina-web .tp-col-lab, .pagina-web .tp-cap, .pagina-web .gi-nota,
.pagina-web .sp-nota, .pagina-web .mt-nota-testa, .pagina-web .mp-sp-min { font-size: 10.5px; }
.pagina-web .gio-partite { font-size: 11px; }
/* il fuoco da tastiera si vede */
:is(button, a, select, input):focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }


/* ---- barre di scorrimento sottili e discrete (su Windows sono sempre visibili e grosse, sul Mac no) ---- */
html, .sezioni, .pannello-elenco, .pannello-filtri { scrollbar-width: thin; scrollbar-color: #CFC6B4 transparent; }

/* ---- schermi bassi (portatile con lo zoom di Windows: ~1280x670 utili): le pagine a blocchi si
   compattano in verticale, cosi' stanno nello schermo senza scorrere. Sugli schermi alti non cambia nulla ---- */
@media (max-height: 820px) {
  .pagina-web { padding: 16px 28px 18px; }
  .pagina-web .head h1 { font-size: 29px; line-height: 1.12; margin: 6px 0 0; }
  .pagina-web .head .sub { margin-top: 4px; font-size: 13.5px; line-height: 1.4; }
  .pagina-web .es-riga { margin-bottom: 5px; }
  .pagina-web .es-nome { font-size: 13px; line-height: 1.2; }
  .pagina-web .es-q { font-size: 17px; line-height: 1.1; }
  .pagina-web .es-q em { font-size: 10.5px; margin-top: 1px; }
  .pagina-web .es-barra span, .pagina-web .es-barra .es-somma { height: 34px; line-height: 34px; }
  .pagina-web .es-barra .es-somma { line-height: 28px; }
  .pagina-web .es-stacco { height: 8px; }
  .pagina-web .es-legenda { margin-top: 2px; }
  .contenuto { padding-top: 8px; }
  /* panoramica: tessere piu' basse */
  .pagina-web .crus-riga { margin-bottom: 10px; gap: 12px; }
  /* i titoli di fascia (con la palla, senza palla, intensita') restano sopra la fila, ma in una riga sottile */
  .pagina-web .crus-body .sezione { font-size: 9.5px; letter-spacing: 2px; line-height: 1; margin: 0 0 4px; }
  .pagina-web .crus-body .tile { padding: 7px 12px 6px 14px; }
  .pagina-web .tile .val { font-size: 26px; line-height: 1.05; }
  .pagina-web .crus-body.singola .cf-barra { display: flex; }
  .pagina-web .pn-body .crus-riga { margin-bottom: 10px; gap: 14px; }
  .pagina-web .pn-nove { padding: 11px 16px 9px 16px !important; }
  .pagina-web .pn-nove .pn-cf { margin-top: 10px; }
  .pagina-web { padding-top: 12px; padding-bottom: 12px; }
  .pagina-web .rule-head { margin: 6px 0 8px; }
  .pagina-web .crus-riga { margin-bottom: 5px; }
  .pagina-web .crus-body .cf-barra { display: none; }
  /* fin dove arriva la palla: gradini dell'imbuto piu' bassi, colonna di destra piu' fitta */
  .pagina-web .id-testa { margin-bottom: 4px; }
  .pagina-web .id-riga { margin-bottom: 6px; }
  .pagina-web .id-lab { margin-bottom: 3px; }
  .pagina-web .id-pcs { margin-top: 2px; }
  .pagina-web .id-riga:nth-of-type(2) :is(.id-barra, .id-perse) { height: 42px !important; }
  .pagina-web .id-riga:nth-of-type(3) :is(.id-barra, .id-perse) { height: 38px !important; }
  .pagina-web .id-riga:nth-of-type(4) :is(.id-barra, .id-perse) { height: 34px !important; }
  .pagina-web .id-riga:nth-of-type(5) :is(.id-barra, .id-perse) { height: 30px !important; }
  .pagina-web .ef2-b { margin-bottom: 6px; }
  .pagina-web .ef2-q { margin-top: 3px; }
  .pagina-web .barre-partite.ef2-gare { height: 30px; }
  .pagina-web .id-num { font-size: 27px; line-height: 1; }
  .pagina-web .ef2-t { font-size: 15.5px; line-height: 1.3; }
  .pagina-web .ef2-qn { font-size: 24px !important; line-height: 1.1; }
  /* modello di gioco: ciambelle piu' piccole, nella legenda nome e dettaglio sulla stessa riga */
  .pagina-web .tp-ciambelle { margin-top: 8px; }
  .pagina-web .tp-blocco svg { width: 168px; height: 168px; }
  .pagina-web .tp-legende { margin-top: 10px; }
  .pagina-web .tp-voce { padding: 4px 8px; margin-bottom: 0; }
  .pagina-web .tp-voce .nome { font-size: 13.5px; line-height: 1.25; }
  .pagina-web .tp-voce .dett { margin-top: 1px; font-size: 10px; line-height: 1.2; }
  /* eventi intensi: righe dei giocatori piu' vicine, legenda e nota sulla stessa riga */
  .pagina-web .gio-lista { gap: 4px; margin-bottom: 8px; }
  .pagina-web .gi-soglia { font-size: 11.5px; margin-top: 6px; line-height: 1.35; }
  /* per 90': la nota sulla soglia prende due righe, le barre si abbassano un poco */
  .pagina-web .gio-p90 .gio-barre { height: 20px; }
  .pagina-web .gioc-solo .legenda { flex-wrap: nowrap; align-items: center; gap: 18px; }
  .pagina-web .gioc-solo .legenda .voce { flex: none; }
  .pagina-web .gi-nota { flex: 1; min-width: 0; text-align: right; line-height: 1.35; }
  /* come cambia il modello: barre dei due tempi piu' basse (l'altezza massima e' una variabile) */
  .pagina-web .mt-wrap { --mt-h: 240px; }
  .contenuto { padding-bottom: 6px; }
  .pagina-web .tile .lab { margin-top: 3px; }
  .pagina-web .barre-partite { height: 14px; margin-top: 4px; }
  .pagina-web .rule-head { margin: 8px 0 12px; }
  .pagina-web .head h1 { margin-top: 0; }
  .pagina-web .mp-sez { margin: 4px 0 6px; }
  .pagina-web .es-intesta { margin-bottom: 2px; }
  .pagina-web .es-wrap { margin-top: 2px; }
}

/* ---- formazioni ESPN (partite e controlli) ---- */
.box-formazioni { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 18px 0 4px; padding: 14px 18px;
  background: var(--carta); border: 1px dashed color-mix(in srgb, var(--accento) 55%, var(--riga)); border-radius: 12px; }
.box-formazioni p { margin: 6px 0 0; font-size: 13px; max-width: 760px; }
.box-formazioni .bottoni { display: flex; gap: 8px; flex: none; }
.box-formazioni button, .form-spiega button, .admin .torna { border-radius: 8px; padding: 8px 14px; font-size: 13px; white-space: nowrap; }
.box-formazioni .primario { background: var(--inchiostro); color: var(--crema); border: 1px solid var(--inchiostro); font-weight: 600; }
.box-formazioni .secondario, .form-spiega .secondario, .admin .torna { background: var(--carta); border: 1px solid var(--riga); }
.box-formazioni button:disabled { opacity: .4; cursor: default; }
.tabella-partite .col-form { width: 290px; background: color-mix(in srgb, var(--accento) 3%, var(--carta)); }
.tabella-partite th.col-form { background: color-mix(in srgb, var(--accento) 7%, var(--crema)); }
.form-stato { display: flex; align-items: center; gap: 8px; }
.form-stato .mini { background: transparent; border: 1px solid var(--riga); border-radius: 6px; padding: 3px 9px; font-size: 12px; }
.form-stato .mini:hover { border-color: var(--inchiostro); }
.pill-form { font: 700 9px var(--mono); letter-spacing: .12em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--riga); color: var(--muto); }
.pill-form.ok { color: #1D7A3E; border-color: #1D7A3E; }
.pill-form.rivedere { color: #8A5A00; border-color: #D9A441; background: #FFF4DC; }
.pill-form.errore { color: #fff; background: #A3202B; border-color: #A3202B; }
.col-form .avvisi { margin-top: 6px !important; }
/* la schermata "Rivedi" */
.admin .torna { margin-bottom: 12px; }
.form-info { font-size: 13.5px; margin: -4px 0 8px; line-height: 1.6; }
.form-info a { color: var(--accento); }
.form-info .rosso { color: #A3202B; }
.admin > .avvisi { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: #7A2E1E; }
.form-spiega { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 16px; }
.form-spiega p { margin: 0; font-size: 13px; color: var(--muto); max-width: 860px; }
.form-lati { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.form-lato h3 { font: 400 22px var(--serif); margin: 0 0 2px; }
.form-lato h3 .mono { font: 11px var(--mono); color: var(--muto); margin-left: 6px; }
.form-lato .etichetta { margin: 6px 0 6px; }
.form-lato .tabella td { padding: 6px 10px; vertical-align: middle; }
.form-lato select { width: 100%; height: 30px; border: 1px solid var(--riga); border-radius: 7px; background: #fff; font: 12.5px var(--sans); padding: 0 6px; }
.form-lato tr.da-fare td { background: #FBEDEC; }
.form-lato tr.da-fare select { border-color: #A3202B; }
.form-lato .suggerito { font-size: 11.5px; color: #7A2E1E; margin-top: 4px; }
.form-lato .uff tr.panca td { color: var(--muto); opacity: .7; }
.form-lato .uff td { padding: 4px 10px; font-size: 12.5px; }
@media (max-width: 1100px) { .form-lati { grid-template-columns: 1fr; } }

/* ---- tenuta · cosa resta del modello dopo l'intervallo (HTML come le altre due pagine della Tenuta) ----
   la pagina riempie lo schermo (146px = barra in alto + margini) e le sette righe si dividono lo spazio */
.pagina-web.tn-pagina { min-height: calc(100vh - 146px); display: flex; flex-direction: column; }
.pagina-web .tn-wrap { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 14px; }
.pagina-web .tn-col { display: flex; flex-direction: column; }
.pagina-web .tn-testa { display: flex; align-items: center; gap: 18px; padding-bottom: 8px; border-bottom: 1.6px solid #141414; }
.pagina-web .tn-nome { font: 700 12.5px var(--sans); letter-spacing: .12em; margin-right: auto; }
.pagina-web .tn-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muto); }
.pagina-web .tn-leg i { width: 16px; height: 11px; display: inline-block; }
.pagina-web .tn-riga { flex: 1; display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px; align-items: center; gap: 14px;
  padding: 6px 8px; margin: 0 -8px; border-bottom: 1px solid #E8E2D4; border-radius: 6px; cursor: default; }
.pagina-web .tn-riga:hover { background: rgba(20,20,20,.04); }
.pagina-web .tn-lab { font-size: 13px; color: #2E2B27; text-align: right; }
.pagina-web .tn-barre { display: flex; flex-direction: column; gap: 5px; }
.pagina-web .tn-b { display: flex; align-items: center; gap: 8px; height: clamp(11px, 1.9vh, 16px); }
.pagina-web .tn-b i { display: block; height: 100%; min-width: 2px; max-width: calc(100% - 52px); border-radius: 2px; }
.pagina-web .tn-b span { font-size: 12px; color: var(--muto); white-space: nowrap; }
.pagina-web .tn-d { font: 400 clamp(18px, 2.7vh, 22px) var(--serif); text-align: right; }
.pagina-web .tn-d.su { color: #1D7A3E; } .pagina-web .tn-d.giu { color: #B3122F; }

/* ---- telefono (fino a 900 px): tessera della squadra in una riga, menu delle sezioni scorrevole,
   barra dei filtri che va a capo; le pagine HTML si ricompongono in colonna, quelle col campo
   si vedono intere nella larghezza (si ingrandiscono con due dita). Il PC non cambia. ---- */
@media (max-width: 900px) {
  .lato { position: relative; border-right: 0; border-bottom: 1px solid var(--riga); }
  .marchio { margin: 6px 6px 2px; padding: 8px 10px; border-radius: 10px; }
  .marchio .eyebrow, .stagione { display: none; }
  .squadra-riga { margin-top: 0; gap: 9px; padding-right: 64px; }
  .scudo { width: 34px; height: 34px; } .logo { width: 25px; height: 25px; }
  .marchio .squadra { font-size: 16px; }
  .piede { position: absolute; top: 6px; right: 6px; height: 50px; border: 0; padding: 0 12px; z-index: 2; color: rgba(255,255,255,.85); }
  .piede #chi { display: none; }
  .piede a { color: #fff; font-size: 12.5px; }
  .app { grid-template-rows: auto 1fr; align-content: start; }
  .sezioni { flex: none; padding: 4px 6px 6px; scrollbar-width: none; }
  .sezioni::-webkit-scrollbar { display: none; }
  .sezioni button .num { display: none; }
  .barra { padding: 8px 8px 8px; gap: 7px; }
  .barra .riga { flex-wrap: wrap; overflow: visible; row-gap: 7px; }
  .riga-comandi .tendina { flex: 1 1 auto; min-width: 0; }
  .riga-comandi .rapidi { order: 3; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .riga-comandi .rapidi::-webkit-scrollbar { display: none; }
  .barra .destra { margin-left: auto; }
  .riga-contesto .destra { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; margin-left: 0; gap: 6px; }
  .riga-contesto .filtri-attivi { flex: 1 1 100%; flex-wrap: wrap; }
  .riga-contesto:has(.filtri-attivi:empty) .filtri-attivi { display: none; }
  .forma-testo { white-space: normal; flex-wrap: wrap; }
  .pannello-filtri { position: fixed; left: 8px; right: 8px; top: auto; width: auto; max-width: none; z-index: 30; }
  .pannello-filtri .segmenti { flex-wrap: wrap; }
  .pannello-elenco { position: fixed; left: 8px; right: 8px; width: auto; }
  .contenuto { padding: 6px 4px 18px; }
  /* pagine col campo: intere nella larghezza */
  .scheda > svg { width: 100% !important; height: auto !important; max-width: 100%; }
  .scheda .testa-impilata { padding-bottom: 4px; }
  .scheda > svg.impilata { margin-bottom: 10px; }
  .scheda .pagina-web .gio-riga { grid-template-columns: 124px 1fr 26px; gap: 8px; }
  .scheda .pagina-web .gio-nome { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scheda .pagina-web .gio-partite { margin-left: 5px; }
  /* Scenario per zona: nome e % sulla prima riga, barra a tutta larghezza, quota sotto */
  .scheda .pagina-web .es-riga { grid-template-columns: minmax(0, 1fr) 118px; row-gap: 3px; column-gap: 8px; margin-bottom: 12px; }
  .scheda .pagina-web .es-riga > .es-barra, .scheda .pagina-web .es-riga > .es-q, .scheda .pagina-web .es-riga > .es-q2 { grid-column: 1 / -1; }
  .scheda .pagina-web .es-intesta > .es-q2, .scheda .pagina-web .es-intesta > .es-barra { display: none; }
  .scheda .pagina-web .es-legenda { flex-wrap: wrap; gap: 4px 14px; }
  /* Tenuta: le due squadre una sotto l'altra; Come cambia il modello: con e senza palla una sotto l'altra */
  .scheda .pagina-web .tn-wrap { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .scheda .pagina-web .tn-riga { grid-template-columns: 128px minmax(0, 1fr) 58px; gap: 8px; }
  .scheda .pagina-web .mt-wrap { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; --mt-h: 170px; }
  .scheda .pagina-web .mt-nome { font-size: 10.5px; line-height: 1.2; overflow-wrap: anywhere; }
  .scheda .pagina-web .ef2-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .scheda .pagina-web .mt-testa { flex-wrap: wrap; row-gap: 4px; }
  .scheda .pagina-web .mt-testa span { white-space: nowrap; }
  .scheda .pagina-web .mt-testa .mt-nota-testa { white-space: normal; flex: 1 1 100%; margin-left: 0; }
  .scheda .pagina-web .gioc-solo .legenda { flex-wrap: wrap; gap: 4px 14px; }
  /* pagine HTML: in colonna */
  .scheda .pagina-web { padding: 14px 12px 16px; min-width: 0; }
  .scheda .pagina-web h1 { font-size: 24px !important; line-height: 1.15; }
  .scheda .pagina-web [class*="-riga"], .scheda .pagina-web [class*="grid"], .scheda .pagina-web [class*="-col"] { min-width: 0; }
}