/* =====================================================================
   Stili delle pagine del congresso alimentate da MyEvent360.

   Tutte le classi hanno prefisso "me-": non possono entrare in conflitto
   con quelle del template, e si riconoscono a colpo d'occhio.

   Colori ripresi dal tema del sito: rosso identitario rgb(204,39,43),
   contenuto su fondo bianco.
   ===================================================================== */

:root {
    --me-rosso:       rgb(204, 39, 43);
    --me-rosso-tenue: rgba(204, 39, 43, .08);
    --me-testo:       #1f1f1f;
    --me-testo-tenue: #6b7280;
    --me-bordo:       #e2e5e9;
    --me-fondo:       #f7f8fa;
    --me-verde:       #00893a;   /* gia' presente nel tema */
}

/* ---------------------------------------------------------------------
   Contenitore
   --------------------------------------------------------------------- */
.me-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px 30px;
    color: var(--me-testo);
}

/* ---------------------------------------------------------------------
   Programma istituzionale / Eventi aziendali

   Due schede, non due filtri: l'ECM chiede che i due programmi si leggano
   come cose separate, e il sottolineato pieno sotto la scheda attiva lo
   dice meglio di una pastiglia colorata — che qui sotto indica invece il
   giorno scelto, un filtro.
   --------------------------------------------------------------------- */
.me-tipi {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 20px 0 4px;
    border-bottom: 1px solid var(--me-bordo);
}
.me-tipo {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: -1px;            /* copre il bordo del contenitore */
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--me-testo);
    font-size: 15px;
    text-decoration: none;
    transition: all .15s;
}
.me-tipo:hover,
.me-tipo:focus {
    color: var(--me-rosso);
    text-decoration: none;
}
.me-tipo.is-attivo {
    color: var(--me-rosso);
    border-bottom-color: var(--me-rosso);
    font-weight: 600;
}
@media (max-width: 480px) {
    /* Sullo schermo del telefono le due voci stanno in colonna: affiancate
       andrebbero a capo spezzando le parole. */
    .me-tipi { flex-direction: column; gap: 0; border-bottom: none; }
    .me-tipo {
        margin-bottom: 0;
        border: 1px solid var(--me-bordo);
        border-radius: 6px;
        text-align: center;
    }
    .me-tipo + .me-tipo { margin-top: 6px; }
    .me-tipo.is-attivo { border-color: var(--me-rosso); }
}

/* ---------------------------------------------------------------------
   Selettore dei giorni
   --------------------------------------------------------------------- */
.me-giorni {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 18px 0 24px;
}
.me-giorno {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--me-bordo);
    border-radius: 999px;
    background: #fff;
    color: var(--me-testo);
    font-size: 14px;
    text-decoration: none;
    transition: all .15s;
}
.me-giorno:hover,
.me-giorno:focus {
    border-color: var(--me-rosso);
    color: var(--me-rosso);
    text-decoration: none;
}
.me-giorno.is-attivo {
    background: var(--me-rosso);
    border-color: var(--me-rosso);
    color: #fff;
}
.me-giorno.is-attivo:hover { color: #fff; }

/* ---------------------------------------------------------------------
   Sala
   --------------------------------------------------------------------- */
.me-sala { margin-bottom: 34px; }

.me-sala-nome {
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--me-rosso);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--me-rosso);
    margin-bottom: 16px;
}

/* Sala col proprio colore (programma) */
.me-sala-colorata {
    color: var(--me-sala, var(--me-rosso));
    border-bottom-color: var(--me-sala, var(--me-rosso));
}

/* ---------------------------------------------------------------------
   Ricerca e filtro per sala
   --------------------------------------------------------------------- */
.me-cerca {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 480px;
    margin: 0 auto 16px;
    flex-wrap: wrap;
}
.me-cerca-campo {
    flex: 1;
    min-width: 170px;
    padding: 9px 14px;
    border: 1px solid var(--me-bordo);
    border-radius: 999px;
    font-size: 14px;
    font-family: inherit;
    color: var(--me-testo);
}
.me-cerca-campo:focus {
    outline: none;
    border-color: var(--me-rosso);
}

/* touch-action: manipulation toglie l'attesa che il browser lascia per
   capire se il tocco e' un doppio-tocco per ingrandire: il campo
   risponde subito invece che dopo trecento millisecondi.

   Non basta pero' ad aprire la tastiera al primo tocco: di quello si
   occupa la classe "needsclick", che esclude il campo da FastClick
   (vedi myevent_scorri.js). */
.me-cerca-campo,
input[type="text"].me-cerca-campo {
    touch-action: manipulation;
    -webkit-user-select: text;
    user-select: text;
    /* Su iOS senza questo il campo puo' restare inerte al primo tocco */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 999px;   /* riaffermato: appearance:none lo azzera */
}
.me-cerca-vai {
    padding: 9px 20px;
    border: none;
    border-radius: 999px;
    background: var(--me-rosso);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.me-cerca-vai:hover { filter: brightness(1.1); }
.me-cerca-azzera {
    font-size: 13px;
    color: var(--me-testo-tenue);
    text-decoration: underline;
}

.me-filtro-sale {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 22px;
}
.me-filtro-sala {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--me-bordo);
    border-left: 3px solid var(--me-sala, var(--me-testo-tenue));
    border-radius: 4px;
    background: #fff;
    color: var(--me-testo);
    font-size: 12.5px;
    text-decoration: none;
    transition: background .14s;
}
.me-filtro-sala:hover,
.me-filtro-sala:focus {
    background: var(--me-fondo);
    color: var(--me-testo);
    text-decoration: none;
}
.me-filtro-sala.is-attivo {
    background: var(--me-sala, var(--me-testo));
    border-color: var(--me-sala, var(--me-testo));
    color: #fff;
    font-weight: 600;
}
.me-filtro-sala.is-attivo:hover { color: #fff; filter: brightness(1.08); }

.me-esito-ricerca {
    text-align: center;
    font-size: 13px;
    color: var(--me-testo-tenue);
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------------
   Sessione
   --------------------------------------------------------------------- */
.me-sessione {
    border: 1px solid var(--me-bordo);
    border-left: 3px solid var(--me-sala, var(--me-bordo));
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
    background: #fff;
}
.me-sessione-testa {
    padding: 12px 16px;
    background: var(--me-fondo);
    border-bottom: 1px solid var(--me-bordo);
}
.me-sessione-ora {
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
    color: var(--me-sala, var(--me-rosso));
    margin-bottom: 3px;
}
.me-sessione-titolo {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}
/* Il sottotitolo porta le avvertenze di servizio — "Attivita' non
   rientrante nel programma formativo accreditato ECM" — e va letto come
   tale: rosso, non grigio come un testo secondario. Si usa il rosso che
   il tema ha gia', per non introdurre un colore nuovo nella pagina. */
.me-sessione-sottotitolo {
    font-size: 13px;
    color: var(--me-rosso);
    margin-top: 2px;
}
.me-moderatori {
    font-size: 12.5px;
    color: var(--me-testo-tenue);
    margin-top: 6px;
}
.me-moderatori strong { color: var(--me-testo); font-weight: 600; }

/* ---------------------------------------------------------------------
   Relazioni
   --------------------------------------------------------------------- */
.me-relazioni { list-style: none; margin: 0; padding: 0; }

.me-relazione {
    display: block;
    padding: 11px 16px;
    border-bottom: 1px solid #f0f2f4;
}
.me-relazione:last-child { border-bottom: none; }

.me-relazione-corpo { flex: 1; min-width: 0; }

.me-relazione-titolo {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.me-relazione-relatore {
    font-size: 13px;
    color: var(--me-sala, var(--me-rosso));
    margin-top: 2px;
}
.me-relazione-dove {
    font-size: 12px;
    color: var(--me-testo-tenue);
    margin-top: 1px;
}

/* ---------------------------------------------------------------------
   Room live — chi sta parlando ora
   --------------------------------------------------------------------- */
.me-live { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Le sale del room live portano il COLORE DELLA PROPRIA SALA, lo stesso del
   programma e della timetable: chi ha gia' consultato il programma riconosce
   la sala dal colore invece di dover leggere il nome. Il colore arriva dalla
   pagina nella variabile --me-sala; il grigio e' il ripiego per una sala che
   non fosse nell'elenco. */
.me-live-sala {
    border: 1px solid var(--me-bordo);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
/* La sala in corso si distingue col proprio colore, non con un rosso uguale
   per tutte: cosi' a colpo d'occhio si vede QUALE sala sta trasmettendo. */
.me-live-sala.is-attiva {
    border-color: var(--me-sala, var(--me-rosso));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.me-live-testa {
    padding: 10px 16px;
    background: var(--me-fondo);
    border-bottom: 1px solid var(--me-bordo);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    /* Una striscia del colore della sala anche quando non e' in corso:
       il riconoscimento funziona sempre, non solo durante l'intervento. */
    border-left: 4px solid var(--me-sala, transparent);
}
.me-live-sala.is-attiva .me-live-testa {
    background: var(--me-sala, var(--me-rosso));
    border-bottom-color: var(--me-sala, var(--me-rosso));
    border-left-color: var(--me-sala, var(--me-rosso));
}
.me-live-nome {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.me-live-sala.is-attiva .me-live-nome { color: #fff; }
/* A riposo il nome prende il colore della sala: si legge bene sul fondo
   chiaro e resta coerente col programma. */
.me-live-sala:not(.is-attiva) .me-live-nome { color: var(--me-sala, var(--me-testo)); }

.me-live-stato {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--me-testo-tenue);
    display: flex;
    align-items: center;
    gap: 6px;
}
.me-live-sala.is-attiva .me-live-stato { color: #fff; }

.me-live-pallino {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #c6c6c6;
    flex-shrink: 0;
}
.me-live-sala.is-attiva .me-live-pallino {
    background: #fff;
    animation: mePulsa 1.6s ease-in-out infinite;
}
@keyframes mePulsa { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
    .me-live-pallino { animation: none !important; }
}

.me-live-corpo { padding: 14px 16px; }

.me-live-sessione {
    font-size: 12px;
    color: var(--me-testo-tenue);
    margin-bottom: 8px;
    line-height: 1.4;
}
.me-live-relatore {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--me-rosso);
    margin-bottom: 3px;
}
.me-live-titolo {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 10px;
}
.me-live-vuoto {
    font-size: 14px;
    color: var(--me-testo-tenue);
    font-style: italic;
    padding: 6px 0;
}

/* Avanzamento dell'intervento */
.me-live-barra {
    height: 5px;
    background: #eceff2;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 5px;
}
.me-live-barra-int {
    height: 100%;
    background: var(--me-rosso);
    border-radius: 999px;
    transition: width .6s ease;
}
.me-live-tempi {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--me-testo-tenue);
    font-variant-numeric: tabular-nums;
}

/* Prossimo intervento */
.me-live-prossimo {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--me-bordo);
    font-size: 12.5px;
    color: var(--me-testo-tenue);
}
.me-live-prossimo strong { color: var(--me-testo); font-weight: 600; }

/* ---------------------------------------------------------------------
   Sintesi
   --------------------------------------------------------------------- */
.me-sintesi {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 13px 16px;
    border: 1px solid var(--me-bordo);
    border-radius: 6px;
    background: #fff;
    margin-bottom: 10px;
}
.me-sintesi-corpo { flex: 1; min-width: 0; }

.me-sintesi-relatore {
    font-size: 15px;
    font-weight: 700;
    color: var(--me-rosso);
}
.me-sintesi-titolo { font-size: 14px; line-height: 1.45; margin-top: 2px; }
.me-sintesi-dove {
    font-size: 12px;
    color: var(--me-testo-tenue);
    margin-top: 4px;
}
.me-sintesi-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 4px;
    background: var(--me-rosso);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.me-sintesi-pdf:hover { filter: brightness(1.1); text-decoration: none; }

/* Sintesi: giorno, poi sala, poi sessione — come il programma */
.me-sintesi-giorno {
    font-size: 19px;
    font-weight: 700;
    color: var(--me-testo);
    margin: 30px 0 16px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--me-bordo);
}
.me-sintesi-giorno:first-of-type { margin-top: 8px; }

.me-sintesi-sessione { margin-bottom: 18px; }

.me-sintesi-sess-testa {
    display: flex;
    gap: 9px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 7px 12px;
    background: var(--me-fondo);
    border-left: 3px solid var(--me-sala, var(--me-bordo));
    border-radius: 4px;
    margin-bottom: 8px;
}
.me-sintesi-sess-ora {
    font-size: 12px;
    font-weight: 700;
    color: var(--me-sala, var(--me-rosso));
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.me-sintesi-sess-titolo {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

/* Il secondo PDF, meno in evidenza del primo */
.me-sintesi-pdf-secondario {
    background: var(--me-testo-tenue) !important;
}

/* ---------------------------------------------------------------------
   Timetable — griglia della giornata

   Le sale in colonna, le ore che scorrono verso il basso. Ogni sessione e'
   un blocco alto quanto la sua durata: le sovrapposizioni e le pause si
   vedono a colpo d'occhio.
   --------------------------------------------------------------------- */

/* La griglia ha bisogno di piu' spazio del resto delle pagine */
.me-wrap-largo { max-width: 1400px; }

.me-griglia-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 8px;
    margin-bottom: 20px;
    /* Scorrimento fluido sui dispositivi tattili */
    -webkit-overflow-scrolling: touch;
}

.me-griglia {
    /* Nessuna larghezza minima: le colonne si dividono lo spazio
       disponibile, quanto che sia. Con molte sale diventano strette, ma
       la giornata si vede tutta in una schermata — che e' la ragione per
       cui si guarda una timetable. */
    width: 100%;
}

/* --- Intestazione con i nomi delle sale --- */
.me-griglia-testa {
    display: flex;
    /* L'intestazione resta visibile mentre si scorre la giornata: senza,
       arrivati al pomeriggio non si sa piu' quale colonna sia quale sala.
       Si ferma a 60px dall'alto, sotto la barra fissa del sito — che e'
       alta esattamente quanto (position: fixed, height 60px). */
    position: sticky;
    top: 60px;
    z-index: 3;
    background: #fff;
    /* Nessuna riga unica: ogni colonna porta il colore della propria sala */
    box-shadow: 0 1px 0 var(--me-bordo);
}
.me-griglia-angolo { flex: 0 0 58px; }

.me-griglia-sala {
    flex: 1 1 0;
    min-width: 0;
    /* Poco margine ai lati: su una colonna stretta ogni pixel tolto al
       testo e' una sillaba in meno per riga. */
    padding: 9px 5px 7px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    /* Ogni sala ha il suo colore, passato dalla pagina */
    color: var(--me-sala, var(--me-rosso));
    border-bottom: 3px solid var(--me-sala, var(--me-rosso));
    text-align: center;
    line-height: 1.25;
    /* Il nome va a capo quante volte serve, senza tagli: con le colonne
       strette un nome troncato — "SALA TEMPIO 1 - DIA..." — non si
       riconosce, e la sala e' proprio cio' che si sta cercando.
       L'intestazione si alza quanto basta, uguale per tutte le colonne. */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* --- Corpo: scala oraria e colonne --- */
.me-griglia-corpo {
    display: flex;
    position: relative;
    background: #fff;
}

/* Ore a sinistra */
.me-scala {
    flex: 0 0 58px;
    position: relative;
}
.me-scala-ora {
    position: absolute;
    left: 0;
    width: 50px;
    text-align: right;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--me-testo-tenue);
    font-variant-numeric: tabular-nums;
    /* Allineata alla linea, non sotto */
    transform: translateY(-6px);
}

/* Linee orarie di riferimento, dietro ai blocchi */
.me-linee {
    position: absolute;
    left: 58px;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
}
.me-linea {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #eef0f3;
}

/* Una colonna per sala */
.me-colonna {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    border-left: 1px solid #eef0f3;
}
.me-colonna:last-child { border-right: 1px solid #eef0f3; }

/* --- Il blocco della sessione ---

   Prende il colore della propria sala: fondo tenue, bordo pieno tutt'intorno.
   Il bordo completo — non solo a sinistra — e' quello che fa capire dove una
   sessione finisce e comincia la successiva, anche quando sono attaccate.
   --- */
.me-blocco {
    position: absolute;
    left: 3px;
    right: 3px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 9px;
    border: 1px solid var(--me-sala, var(--me-rosso));
    border-left-width: 4px;
    border-radius: 4px;
    /* Il colore pieno tinge il fondo appena: il testo resta leggibile */
    background: color-mix(in srgb, var(--me-sala, var(--me-rosso)) 9%, #fff);
    color: var(--me-testo);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: background .14s, box-shadow .14s, transform .14s;
}

/* Dove color-mix non è disponibile (browser più datati) resta il fondo
   bianco col bordo colorato: si legge comunque bene. */
@supports not (background: color-mix(in srgb, red 9%, white)) {
    .me-blocco { background: #fff; }
}

.me-blocco:hover,
.me-blocco:focus {
    background: color-mix(in srgb, var(--me-sala, var(--me-rosso)) 18%, #fff);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
    z-index: 2;
}
.me-blocco:focus-visible {
    outline: 2px solid var(--me-sala, var(--me-rosso));
    outline-offset: 1px;
}

.me-blocco-ora {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--me-sala, var(--me-rosso));
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.me-blocco-titolo {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.32;
    overflow: hidden;
}

/* Blocchi brevi: orario e titolo su una riga sola */
.me-blocco.is-stretto {
    padding: 2px 9px;
    flex-direction: row;
    align-items: center;
    gap: 7px;
}
.me-blocco.is-stretto .me-blocco-titolo {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.5px;
}
/* --- Elenco per schermi stretti --- */
.me-griglia-mobile { display: none; }

.me-mob-riga {
    width: 100%;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 10px 12px;
    /* Il bordo sinistro porta il colore della sala: va dichiarato DOPO
       quello generale, altrimenti verrebbe sovrascritto. */
    border: 1px solid var(--me-bordo);
    border-left: 4px solid var(--me-sala, var(--me-rosso));
    border-radius: 5px;
    margin-bottom: 7px;
    background: #fff;
    color: var(--me-testo);
    text-decoration: none;
}
.me-mob-riga:hover { background: var(--me-fondo); text-decoration: none; color: var(--me-testo); }

.me-mob-ora {
    flex: 0 0 52px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--me-sala, var(--me-rosso));
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
.me-mob-ora small {
    display: block;
    font-weight: 400;
    color: var(--me-testo-tenue);
    font-size: 11px;
}
.me-mob-titolo { font-size: 13.5px; line-height: 1.4; }
/* ---------------------------------------------------------------------
   Modale del dettaglio sessione

   Si apre toccando un blocco della timetable: nel blocco stanno solo
   orario e titolo, qui il resto — sala, moderatori e interventi.
   --------------------------------------------------------------------- */
.me-modale {
    position: fixed;
    inset: 0;
    /* Su telefono "vh" conta l'altezza dello schermo SENZA tener conto
       delle barre del browser: un riquadro alto 90vh sfora in cima e la
       testata resta tagliata. "dvh" misura invece lo spazio realmente
       visibile, e si adatta quando le barre compaiono o scompaiono. */
    height: 100dvh;
    max-height: 100dvh;
    /* Il template arriva a z-index 9999999 (menu laterale, sovrapposizioni):
       sotto quel valore il modale finirebbe dietro l intestazione fissa e il
       pulsante di chiusura resterebbe irraggiungibile. */
    z-index: 10000000;
    background: rgba(31, 31, 31, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
/* Senza questa riga il display:flex qui sopra vincerebbe sull'attributo
   hidden e il modale resterebbe sempre aperto. */
.me-modale[hidden] { display: none; }

.me-modale-riquadro {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    width: 100%;
    max-width: 620px;
    /* Non piu' alto dello spazio che c'e' davvero: il contenuto scorre
       dentro, la testata e il piede restano sempre visibili. */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Ripiego per i browser che non conoscono dvh: si torna a vh, con un
   margine prudente che tiene conto delle barre. */
@supports not (height: 100dvh) {
    .me-modale { height: 100vh; max-height: 100vh; }
    .me-modale-riquadro { max-height: 86vh; }
}

.me-modale-testa {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px 14px;
    /* Resta sempre visibile: e' dove sta la X */
    flex-shrink: 0;
    /* Il colore della sala da cui si e' arrivati */
    border-bottom: 3px solid var(--me-sala, var(--me-rosso));
}
.me-modale-ora {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--me-sala, var(--me-rosso));
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.me-modale-titolo {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.32;
    margin: 0;
    color: var(--me-testo);
}
/* Come sopra: nella finestra di dettaglio il sottotitolo e' l'avvertenza. */
.me-modale-sottotitolo {
    font-size: 13.5px;
    color: var(--me-rosso);
    margin-top: 3px;
    line-height: 1.4;
}
.me-modale-chiudi {
    /* Bersaglio riconoscibile: un carattere nudo su fondo bianco si nota
       poco, e su telefono e' facile mancarlo. */
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--me-fondo);
    border: 1px solid var(--me-bordo);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--me-testo);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.me-modale-chiudi:hover {
    background: var(--me-sala, var(--me-rosso));
    border-color: var(--me-sala, var(--me-rosso));
    color: #fff;
}
/* All apertura il fuoco va sulla X: senza questa riga il browser le disegna
   intorno il proprio contorno nero, che sembra un difetto. Il contorno resta
   per chi naviga da tastiera, dove serve davvero. */
.me-modale-chiudi:focus { outline: none; }
.me-modale-chiudi:focus-visible {
    outline: 2px solid var(--me-sala, var(--me-rosso));
    outline-offset: 2px;
    border-radius: 4px;
}

.me-modale-corpo {
    padding: 16px 22px 22px;
    /* L'unica parte che scorre */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sala ed eventuali crediti */
.me-modale-dati {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.me-modale-dato {
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--me-fondo);
    border: 1px solid var(--me-bordo);
    color: var(--me-testo);
}
.me-modale-dato b {
    color: var(--me-testo-tenue);
    font-weight: 600;
    margin-right: 4px;
}

.me-modale-descrizione {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--me-testo-tenue);
    margin-bottom: 14px;
}

.me-modale-sezione { margin-top: 16px; }

.me-modale-etichetta {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--me-sala, var(--me-rosso));
    padding-bottom: 5px;
    border-bottom: 1px solid var(--me-bordo);
    margin-bottom: 9px;
}
.me-modale-moderatori {
    font-size: 14px;
    line-height: 1.5;
    color: var(--me-testo);
}

/* Elenco degli interventi */
.me-modale-relazioni {
    list-style: none;
    margin: 0;
    padding: 0;
}
.me-modale-relazione {
    padding: 9px 0;
    border-bottom: 1px solid #f0f2f4;
}
.me-modale-relazione:last-child { border-bottom: none; }

.me-modale-rel-titolo {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.42;
}
.me-modale-rel-relatore {
    font-size: 13px;
    color: var(--me-sala, var(--me-rosso));
    margin-top: 2px;
}
/* Piede del modale: il secondo modo per chiudere. Su telefono il pollice
   sta in basso, e cercare la X in alto e' scomodo. */
.me-modale-piede {
    padding: 12px 22px 16px;
    border-top: 1px solid var(--me-bordo);
    background: #fff;
    flex-shrink: 0;
}
.me-modale-chiudi-grande {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--me-bordo);
    border-radius: 6px;
    background: var(--me-fondo);
    color: var(--me-testo);
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.me-modale-chiudi-grande:hover {
    background: var(--me-sala, var(--me-rosso));
    border-color: var(--me-sala, var(--me-rosso));
    color: #fff;
}

.me-modale-rel-dove {
    font-size: 12px;
    color: var(--me-testo-tenue);
    margin-top: 1px;
}

/* ---------------------------------------------------------------------
   Messaggi
   --------------------------------------------------------------------- */
.me-vuoto {
    text-align: center;
    padding: 46px 20px;
    color: var(--me-testo-tenue);
    font-size: 15px;
}
.me-nota {
    font-size: 12.5px;
    color: var(--me-testo-tenue);
    text-align: center;
    margin-top: 22px;
}

/* ---------------------------------------------------------------------
   Elenchi che scorrono in orizzontale

   Su telefono giorni e sale non entrano nello schermo. Un elenco tagliato
   di netto sembra finito li': servono segnali che dicano "c'e' dell'altro".
   Se ne usano tre insieme, perche' nessuno da solo basta:

     1. una sfumatura sul bordo, che compare SOLO dal lato dove c'e'
        ancora qualcosa da vedere (la gestisce il JavaScript);
     2. una barra di scorrimento sottile ma visibile;
     3. l'ultimo elemento volutamente tagliato a meta', cosi' si capisce
        che continua.
   --------------------------------------------------------------------- */
.me-scorrevole {
    position: relative;
}

/* Le sfumature sono sul contenitore, non sull'elenco: devono restare
   ferme mentre il contenuto scorre sotto. */
.me-scorrevole::before,
.me-scorrevole::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 8px;           /* lascia scoperta la barra di scorrimento */
    width: 34px;
    pointer-events: none;  /* non deve intercettare il tocco */
    opacity: 0;
    transition: opacity .18s;
    z-index: 2;
}
.me-scorrevole::before {
    left: 0;
    background: linear-gradient(to right, #fff 25%, rgba(255,255,255,0));
}
.me-scorrevole::after {
    right: 0;
    background: linear-gradient(to left, #fff 25%, rgba(255,255,255,0));
}

/* Le classi le mette il JavaScript, secondo la posizione dello scorrimento */
.me-scorrevole.ha-sinistra::before { opacity: 1; }
.me-scorrevole.ha-destra::after    { opacity: 1; }

/* Freccia sul lato dove si puo' andare: piccola, ma inequivocabile */
.me-scorrevole-freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--me-bordo);
    color: var(--me-testo-tenue);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 3;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.me-scorrevole-freccia.destra  { right: 1px; }
.me-scorrevole-freccia.sinistra { left: 1px; }
.me-scorrevole.ha-destra   .me-scorrevole-freccia.destra   { opacity: 1; }
.me-scorrevole.ha-sinistra .me-scorrevole-freccia.sinistra { opacity: 1; }

/* Su schermo largo non serve nulla di tutto questo */
@media (min-width: 601px) {
    .me-scorrevole::before,
    .me-scorrevole::after,
    .me-scorrevole-freccia { display: none; }
}

/* =====================================================================
   SCHERMI PICCOLI

   Il sito viene consultato soprattutto dal telefono, in sala. Le scelte
   qui sotto seguono tre principi:
     - il testo si legge senza ingrandire (niente sotto i 13px sul corpo)
     - ogni cosa toccabile e' alta almeno 44px, la misura di un polpastrello
     - niente scorrimento orizzontale: la pagina scende, non si allarga
   ===================================================================== */

/* --- Tablet e telefoni in orizzontale --- */
@media (max-width: 860px) {
    /* La griglia a piu' colonne non si legge su schermo stretto:
       al suo posto l'elenco per sala. */
    .me-griglia-scroll { display: none; }
    .me-griglia-mobile { display: block; }

    .me-wrap, .me-wrap-largo { padding-left: 12px; padding-right: 12px; }
}

/* --- Telefoni --- */
@media (max-width: 600px) {

    /* ---- Contenitore ---- */
    .me-wrap, .me-wrap-largo {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 22px;
    }

    /* ---- Giorni: scorrono in orizzontale invece di andare a capo ----
       Con quattro o cinque giornate le pillole occuperebbero tre righe
       prima ancora di arrivare al programma. */
    /* I giorni scorrono in orizzontale. Perche' si capisca che ce ne sono
       altri, l'ultimo visibile resta tagliato a meta' sotto una sfumatura
       (vedi .me-scorrevole piu' sotto): un elemento troncato di netto
       sembrerebbe la fine dell'elenco. */
    .me-giorni {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 7px;
        margin: 14px 0 18px;
        padding: 2px 0 8px;
        -webkit-overflow-scrolling: touch;
        /* La barra resta, ma sottile: e' il segnale piu' diretto che si scorre */
        scrollbar-width: thin;
        scrollbar-color: var(--me-bordo) transparent;
    }
    .me-giorni::-webkit-scrollbar { height: 3px; }
    .me-giorni::-webkit-scrollbar-track { background: transparent; }
    .me-giorni::-webkit-scrollbar-thumb {
        background: var(--me-bordo);
        border-radius: 3px;
    }
    .me-giorno {
        flex: 0 0 auto;
        padding: 11px 17px;      /* comodo da toccare */
        font-size: 13.5px;
    }

    /* ---- Ricerca ---- */
    .me-cerca {
        gap: 7px;
        margin-bottom: 14px;
    }
    .me-cerca-campo {
        /* 16px impedisce ad iOS di ingrandire la pagina quando si scrive */
        font-size: 16px;
        padding: 11px 15px;
    }
    .me-cerca-vai { padding: 11px 20px; }
    .me-cerca-azzera { width: 100%; text-align: center; padding: 4px 0; }

    /* ---- Filtro per sala: anch'esso scorrevole ---- */
    .me-filtro-sale {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        margin: 0 0 18px;
        padding: 2px 0 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--me-bordo) transparent;
    }
    .me-filtro-sale::-webkit-scrollbar { height: 3px; }
    .me-filtro-sale::-webkit-scrollbar-track { background: transparent; }
    .me-filtro-sale::-webkit-scrollbar-thumb {
        background: var(--me-bordo);
        border-radius: 3px;
    }
    .me-filtro-sala {
        flex: 0 0 auto;
        padding: 9px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* ---- Programma ---- */
    .me-sala { margin-bottom: 26px; }
    .me-sala-nome {
        font-size: 15px;
        /* Nomi lunghi: si va a capo invece di uscire dallo schermo */
        word-break: break-word;
    }
    .me-sessione-testa { padding: 11px 13px; }
    .me-sessione-titolo { font-size: 14.5px; }
    .me-relazione { padding: 11px 13px; }
    .me-relazione-titolo { font-size: 13.5px; }
    .me-relazione-relatore { font-size: 13px; }

    /* ---- Timetable: elenco per sala ---- */
    .me-mob-riga {
        padding: 13px 12px;
        align-items: flex-start;
    }
    .me-mob-ora { flex: 0 0 48px; font-size: 13px; }
    .me-mob-titolo { font-size: 13.5px; }

    /* ---- Room live ---- */
    .me-live {
        grid-template-columns: 1fr;
        gap: 13px;
    }
    .me-live-relatore { font-size: 18px; }
    .me-live-titolo { font-size: 13.5px; }
    .me-live-corpo { padding: 13px 14px; }

    /* ---- Sintesi ---- */
    .me-sintesi {
        flex-direction: column;
        gap: 11px;
        padding: 13px;
    }
    .me-sintesi-pdf {
        /* A tutta larghezza: piu' facile da centrare col pollice */
        width: 100%;
        justify-content: center;
        padding: 11px 16px;
    }
    .me-sintesi-relatore { font-size: 14.5px; }

    /* ---- Modale: sale dal basso come un pannello ---- */
    .me-modale {
        padding: 0;
        align-items: flex-end;
    }
    .me-modale-riquadro {
        max-width: none;
        /* Quasi tutto lo schermo, ma mai oltre: si lascia scoperta una
           striscia in alto, cosi' si vede che sotto c'e' la pagina. */
        max-height: calc(100% - 28px);
        border-radius: 14px 14px 0 0;
    }
    .me-modale-testa { padding: 15px 16px 12px; }
    .me-modale-titolo { font-size: 16.5px; }
    .me-modale-corpo { padding: 14px 16px 20px; }
    .me-modale-chiudi {
        /* Su telefono un filo piu' grande: e' il bersaglio principale */
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    .me-modale-piede { padding: 11px 16px 14px; }
    .me-modale-relazione { padding: 10px 0; }

    /* ---- Messaggi ---- */
    .me-vuoto { padding: 34px 16px; font-size: 14.5px; }
    .me-nota { font-size: 12px; }
}

/* --- Telefoni stretti --- */
@media (max-width: 380px) {
    .me-live-relatore { font-size: 17px; }
    .me-sala-nome { font-size: 14px; }
    .me-cerca-vai { padding: 11px 15px; }
    .me-mob-ora { flex: 0 0 44px; }
}
/* ==========================================================
   MODALE DELLA SINTESI (pagina Sintesi)
   Riusa l'impianto del modale della timetable: stesse regole per
   il livello di sovrapposizione, l'altezza in dvh e la chiusura.
   Qui il contenuto e' un PDF, quindi serve piu' spazio.
   ========================================================== */

/* Il PDF ha bisogno di larghezza: su schermo ampio si usa quasi tutta
   la finestra, tenendo un margine perche' si veda che sotto c'e' la pagina. */
.me-modale-riquadro-largo {
    max-width: 1100px;
    width: 100%;
    height: 100%;
}

/* Il corpo che contiene il PDF non ha imbottitura: il documento occupa
   tutto lo spazio disponibile fra testata e piede. */
.me-modale-corpo-pdf {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;          /* senza questo il riquadro si allunga oltre il contenitore */
    display: flex;
    background: var(--me-fondo);
}
.me-modale-corpo-pdf iframe {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    display: block;
}

/* Nel piede due comandi affiancati: aprire a tutto schermo e chiudere. */
.me-sintesi-piede {
    display: flex;
    gap: 10px;
    align-items: center;
}
.me-sintesi-piede .me-modale-chiudi-grande { width: auto; flex: 1 1 auto; }

.me-sintesi-azione {
    flex: 0 0 auto;
    padding: 12px 16px;
    border: 1px solid var(--me-bordo);
    border-radius: 6px;
    background: #fff;
    color: var(--me-testo);
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.me-sintesi-azione:hover,
.me-sintesi-azione:focus {
    background: var(--me-fondo);
    border-color: var(--me-testo-tenue);
    text-decoration: none;
    color: var(--me-testo);
}

/* Su schermo stretto il riquadro non si usa: il pulsante apre direttamente
   il file. Le regole restano comunque coerenti se la finestra viene ridotta
   mentre il modale e' aperto. */
@media (max-width: 780px) {
    .me-sintesi-piede { flex-direction: column-reverse; }
    .me-sintesi-piede .me-sintesi-azione,
    .me-sintesi-piede .me-modale-chiudi-grande { width: 100%; text-align: center; }
}

/* Foto del relatore nella pagina Room Live.
   L'immagine e' gia' sul sito, trasferita col programma: qui si collega
   soltanto. Se manca, il nome resta comunque allineato a sinistra. */
.me-live-persona {
    display: flex;
    align-items: center;
    gap: 12px;
}
.me-live-foto {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
@media (max-width: 600px) {
    .me-live-foto { width: 42px; height: 42px; }
}

/* ==========================================================
   AREA STAMPA
   Taglio diverso dalla pagina Sintesi dei partecipanti: qui conta
   l'argomento, non l'articolazione del congresso. Solo titoli di
   sessione, date come filtro, niente sale e niente orari.
   ========================================================== */

.me-stampa-occhiello {
    text-align: center;
    color: var(--me-testo-tenue);
    font-size: 14px;
    margin: 0 0 18px;
}

/* Le due sezioni: comunicati e sintesi */
.me-stampa-tab {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.me-stampa-tab-voce {
    flex: 1 1 0;
    padding: 13px 16px;
    text-align: center;
    border: 1px solid var(--me-bordo);
    border-radius: 6px;
    background: #fff;
    color: var(--me-testo);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.me-stampa-tab-voce:hover,
.me-stampa-tab-voce:focus {
    background: var(--me-fondo);
    color: var(--me-testo);
    text-decoration: none;
}
.me-stampa-tab-voce.is-attiva {
    background: var(--me-rosso);
    border-color: var(--me-rosso);
    color: #fff;
}
.me-stampa-tab-voce.is-attiva:hover { color: #fff; filter: brightness(1.08); }

/* L'elenco delle sessioni */
.me-stampa-elenco {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

/* Il pannello della sessione
   -----------------------------------------------------------------
   Il fondo e' leggermente piu' scuro della pagina, non bianco su
   bianco. Il bordo da solo non basta: e' un grigio chiarissimo
   (#e2e5e9) e su un monitor poco contrastato — o con la luce di una
   sala congressi — sparisce, e non si capisce dove finisce una
   sessione e dove comincia la successiva. Il cliente: "con monitor
   con poco contrasto i bordi dei pannelli si vedono poco".

   Il valore e' scelto misurando: #e4e9ef su bianco da' un contrasto di
   1,22:1, pari a quello del bordo (1,26:1). Cosi' l'INTERO riquadro si
   vede quanto oggi si vede il solo contorno — un salto netto, senza
   trasformare l'elenco in una scacchiera. Un primo tentativo con
   #f2f4f7 valeva 1,1:1, cioe' MENO del bordo: sui monitor per cui si
   e' fatta questa modifica si sarebbe visto ancora meno di prima.
   Lo spessore del bordo resta invariato, come richiesto.

   La sessione APERTA torna bianca: quando si legge il contenuto e'
   quella a doversi staccare dalle altre, e l'inversione la indica
   meglio di qualunque bordo. */
.me-stampa-sessione {
    border: 1px solid var(--me-bordo);
    border-radius: 6px;
    background: #e4e9ef;
    overflow: hidden;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

/* Aperta: fondo bianco e bordo rosso, si distingue a colpo d'occhio */
.me-stampa-sessione.is-aperta {
    background: #fff;
    border-color: var(--me-rosso);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* Al passaggio del mouse il pannello chiaro si schiarisce: dice che
   si puo' toccare senza cambiare il peso visivo dell'elenco. */
.me-stampa-sessione:not(.is-aperta):hover {
    background: #dde4ec;
    border-color: #ccd3dc;
}

/* La testata e' un pulsante: si tocca tutta, non solo la freccia */
.me-stampa-testa {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--me-testo);
    /* Il template intercetta il primo tocco: questo lo lascia al pulsante */
    touch-action: manipulation;
    /* Il riquadro grigio che i browser mobili disegnano sul tocco: qui
       e' di troppo, il pannello cambia gia' aspetto da se'. */
    -webkit-tap-highlight-color: transparent;
}

/* Al clic il browser disegna il suo contorno di messa a fuoco, nero,
   attorno al titolo. Sul pannello e' di troppo: la sessione aperta si
   riconosce gia' dal bordo rosso e dal fondo bianco.
   Si toglie solo per il clic: chi naviga con la tastiera deve continuare
   a vedere dove si trova, e per quello c'e' :focus-visible qui sotto.
   E' la stessa convenzione gia' usata per .me-modale-chiudi. */
.me-stampa-testa:focus {
    outline: none;
}

/* Chi arriva col tasto di tabulazione vede dove si trova, e in rosso
   invece che in nero: si accorda col bordo della sessione aperta.
   Il segno lo porta il PANNELLO, non la sola testata: un rettangolo
   attorno alla sola parte alta spezzerebbe il riquadro a meta'. */
.me-stampa-testa:focus-visible {
    outline: none;
}
.me-stampa-sessione:has(.me-stampa-testa:focus-visible) {
    border-color: var(--me-rosso);
    box-shadow: 0 0 0 2px var(--me-rosso-tenue);
}

/* Ripiego per i browser che non conoscono :has() — Safari sotto la 15.4,
   Firefox sotto la 121. Li' il segno resta sulla testata: meno bello,
   ma chi naviga da tastiera deve sapere dove si trova. */
@supports not selector(:has(*)) {
    .me-stampa-testa:focus-visible {
        outline: 2px solid var(--me-rosso);
        outline-offset: -3px;
    }
}
/* L'evidenziazione al passaggio del mouse la fa il pannello intero
   (.me-stampa-sessione:hover): qui darebbe due colori sovrapposti e
   la testata risulterebbe piu' chiara del resto del riquadro.
   Sulla sessione aperta, che e' bianca, serve ancora. */
.me-stampa-sessione.is-aperta .me-stampa-testa:hover {
    background: var(--me-fondo);
}

.me-stampa-titolo {
    flex: 1;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.45;
}
.me-stampa-quante {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--me-testo-tenue);
    white-space: nowrap;
}
.me-stampa-freccia {
    flex-shrink: 0;
    color: var(--me-rosso);
    font-size: 18px;
    transition: transform .2s;
}
.me-stampa-sessione.is-aperta .me-stampa-freccia { transform: rotate(90deg); }

/* Le relazioni dentro la sessione */
/* L'elenco delle relazioni dentro la sessione aperta.
   Un grigio appena piu' marcato di --me-fondo: la sessione aperta ora
   e' bianca, e con lo sfondo di sempre il distacco era troppo timido
   proprio sui monitor per cui si e' fatta questa modifica. */
.me-stampa-corpo {
    border-top: 1px solid var(--me-bordo);
    background: #f4f6f9;
    padding: 4px 18px 12px;
}
/* Senza questa riga un display impostato altrove vincerebbe sull'attributo */
.me-stampa-corpo[hidden] { display: none; }

.me-stampa-relazione {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--me-bordo);
    flex-wrap: wrap;
}
.me-stampa-relazione:last-child { border-bottom: none; }

.me-stampa-rel-testo { flex: 1; min-width: 200px; }
.me-stampa-rel-relatore {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}
.me-stampa-rel-titolo {
    font-size: 13.5px;
    color: var(--me-testo-tenue);
    line-height: 1.45;
}

.me-stampa-pdf {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 4px;
    background: var(--me-rosso);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.me-stampa-pdf:hover { filter: brightness(1.1); text-decoration: none; }

/* Una sintesi non ancora approvata: si dice, invece di lasciare il vuoto */
.me-stampa-attesa {
    flex-shrink: 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--me-testo-tenue);
}

.me-stampa-nota {
    text-align: center;
    font-size: 12.5px;
    color: var(--me-testo-tenue);
    margin: 0 0 20px;
}



/* =====================================================================
   prog_time.php — rifiniture
   ===================================================================== */

/* --- Il segnale di scorrimento sulla griglia della timetable ---------
   Il contenitore lo aggiunge myevent_scorri.js, lo stesso che serve i
   giorni e le sale. Qui si adatta a un elemento alto diverse centinaia
   di pixel: le sfumature a tutta altezza sarebbero un velo pesante,
   e la freccia al centro verticale finirebbe a meta' della griglia. */
.me-scorrevole > .me-griglia-scroll ~ .me-scorrevole-freccia {
    top: 92px;              /* appena sotto l'intestazione delle sale */
    transform: none;
    width: 26px;
    height: 26px;
    line-height: 24px;
    font-size: 14px;
}

/* La sfumatura non copre l'intestazione: i nomi delle sale devono
   restare leggibili fino al bordo. */
.me-scorrevole:has(> .me-griglia-scroll)::before,
.me-scorrevole:has(> .me-griglia-scroll)::after {
    width: 26px;
}

/* --- La ricerca e i suoi risultati nella timetable -------------------
   Stesso linguaggio del resto del sito: bordi tenui, angoli morbidi,
   il colore della sala come unica nota forte. */
.pt-risultati {
    margin: 0 0 18px;
    border: 1px solid var(--me-bordo, #dfe3e8);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.pt-risultati-testa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: linear-gradient(180deg, #fafbfc, #f4f6f8);
    border-bottom: 1px solid var(--me-bordo, #dfe3e8);
    font-size: .88rem;
    color: var(--me-testo, #23303c);
}

.pt-risultati-testa > span {
    flex: 1;
    min-width: 0;
}

.pt-risultati-chiudi {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--me-bordo, #dfe3e8);
    color: var(--me-testo-tenue, #5a6672);
    font-size: .8rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}

.pt-risultati-chiudi::before {
    content: '\2715';
    font-size: .74rem;
}

.pt-risultati-chiudi:hover,
.pt-risultati-chiudi:focus-visible {
    background: #eef1f4;
    border-color: #cbd2d9;
    color: var(--me-testo, #23303c);
}

/* L'elenco dei risultati occupa la pagina e si scorre con essa: un
   proprio scorrimento, dentro una pagina che gia' scorre, confonde —
   non si capisce cosa si sta guardando ne' dove finisce l'elenco. */
.pt-risultati-elenco,
.pt-elenco-risultati {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.pt-risultati-elenco li + li {
    border-top: 1px solid #eef1f4;
}

/* Ogni risultato e' un pulsante vero: raggiungibile da tastiera, e
   annuncia da se' di essere attivabile. */
.pt-risultato {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 11px 16px 11px 13px;
    background: none;
    border: 0;
    border-left: 3px solid var(--me-sala, #1565C0);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background .12s;
}

.pt-risultato:hover,
.pt-risultato:focus-visible {
    background: #f5f8fb;
    outline: none;
}

.pt-risultato:focus-visible {
    box-shadow: inset 0 0 0 2px var(--me-sala, #1565C0);
}

/* Data e ora incolonnate: la riga non cresce, e si sa sempre di quale
   giornata si tratta anche se il risultato viene condiviso o riletto
   dopo aver cambiato giorno. */
.pt-risultato-quando {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 96px;
    line-height: 1.25;
}

.pt-risultato-data {
    font-size: .72rem;
    color: var(--me-testo-tenue, #5a6672);
    text-transform: capitalize;
}

.pt-risultato-ora {
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    font-weight: 600;
    color: var(--me-testo, #23303c);
}

.pt-risultato-titolo {
    flex: 1;
    min-width: 0;
    font-size: .9rem;
    line-height: 1.38;
}

.pt-risultato-sala {
    flex-shrink: 0;
    font-size: .72rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--me-sala, #1565C0);
    font-weight: 700;
    white-space: nowrap;
}

/* Nessun risultato: un messaggio, non un riquadro vuoto. */
.pt-risultati-nessuno {
    padding: 16px;
    font-size: .86rem;
    color: var(--me-testo-tenue, #5a6672);
    text-align: center;
}

/* Senza il titolo del congresso — tolto su richiesta — i due pulsanti
   finivano appiccicati alla fascia dell'intestazione. Il margine che
   prima veniva dall'h2 va rimesso qui. */
.pt-viste {
    margin-top: 20px;
    margin-bottom: 14px;
}

/* --- Su telefono spariscono ENTRAMBI i pulsanti ----------------------
   La griglia a piu' colonne su uno schermo stretto non si legge: con
   otto o undici sale le colonne scendono sotto i cinquanta pixel, e del
   titolo non resta nulla. Si e' provato a tenerla — come fa la webapp
   del portale, con lo scorrimento laterale — ma li' la timetable e' una
   pagina a se', mentre qui vive dentro il contenitore del template: due
   scorrimenti annidati si contendono il gesto, e si scorre "dentro un
   pannello" invece che con la pagina.

   Resta dunque il solo elenco, e i pulsanti spariscono: uno solo, gia'
   attivo, sarebbe un comando inutile che occupa spazio. */
@media (max-width: 860px) {
    .pt-viste {
        display: none;
    }
}

@media (max-width: 600px) {
    .pt-risultato {
        flex-wrap: wrap;
        gap: 4px 12px;
        padding: 10px 14px 10px 11px;
    }

    .pt-risultato-titolo {
        flex-basis: 100%;
        order: 3;
    }

}

/* =====================================================================
   prog_time.php — margini e scorrimento
   ===================================================================== */

/* --- Lo scorrimento della griglia si deve VEDERE --------------------
   Le sfumature ai lati dicono che c'e' altro, ma da sole sono discrete:
   su una griglia alta si notano poco. Qui la barra di scorrimento resta
   visibile — sottile, ma presente — perche' e' il segnale che tutti
   riconoscono senza doverlo imparare. */
.me-griglia-scroll {
    scrollbar-width: thin;
    scrollbar-color: #b6c0ca transparent;
    padding-bottom: 10px;
}

.me-griglia-scroll::-webkit-scrollbar {
    height: 9px;
}

.me-griglia-scroll::-webkit-scrollbar-track {
    background: #f0f3f6;
    border-radius: 5px;
}

.me-griglia-scroll::-webkit-scrollbar-thumb {
    background: #b6c0ca;
    border-radius: 5px;
    border: 2px solid #f0f3f6;
}

.me-griglia-scroll::-webkit-scrollbar-thumb:hover {
    background: #96a3ae;
}

/* --- Le date su schermo stretto -------------------------------------
   Il trattamento per telefono degli elenchi orizzontali e' scritto per
   .me-giorni; questa pagina usa .me-filtro-sale, che restava senza. */
@media (max-width: 600px) {
    .pt-viste {
        margin-top: 16px;
    }

    .me-filtro-sale {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 7px;
        /* Il margine laterale mancava: le pillole toccavano il bordo
           dello schermo, e la prima sembrava tagliata. */
        margin: 14px 0 18px;
        padding: 2px 2px 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--me-bordo) transparent;
    }

    .me-filtro-sale::-webkit-scrollbar { height: 3px; }
    .me-filtro-sale::-webkit-scrollbar-track { background: transparent; }
    .me-filtro-sale::-webkit-scrollbar-thumb {
        background: var(--me-bordo);
        border-radius: 3px;
    }

    .me-filtro-sala {
        flex: 0 0 auto;
        padding: 10px 16px;      /* comodo da toccare */
        font-size: 13.5px;
    }
}

/* =====================================================================
   prog_time.php — blocchi corti: piu' spazio al titolo
   ===================================================================== */

/* In una sessione di mezz'ora l'altezza utile e' poca: fra margini sopra
   e sotto (12px) e lo stacco fra orario e titolo, al testo resta meno di
   quanto serve per due righe. Qui si recupera quello spazio — SOLO sui
   blocchi corti: quelli lunghi hanno aria da vendere e stanno meglio
   com'erano. */
.me-blocco.is-corto {
    padding: 4px 8px;
    gap: 0;
}

.me-blocco.is-corto .me-blocco-ora {
    /* L'orario resta leggibile ma occupa una riga piu' bassa: il titolo
       e' l'informazione che conta, l'ora si ritrova sulla scala a
       sinistra. */
    font-size: 10px;
    line-height: 1.15;
}

.me-blocco.is-corto .me-blocco-titolo {
    font-size: 11.5px;
    line-height: 1.24;
}

/* =====================================================================
   prog_time.php — il termine cercato, evidenziato nel modale
   ===================================================================== */

/* Serve a capire a colpo d'occhio perche' una sessione e' fra i
   risultati: spesso la corrispondenza e' su un relatore in fondo
   all'elenco, e senza un segno bisogna rileggere tutto.

   Il giallo dei browser sarebbe fuori tono: qui si usa il colore della
   sala, appena accennato, con il testo che resta quello di prima. */
.pt-evid {
    background: color-mix(in srgb, var(--me-sala, #1565C0) 22%, #fff);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
    /* Un filo piu' marcato del testo attorno, senza gridare */
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Dove color-mix non e' disponibile, un giallo tenue: meglio di niente,
   e comunque piu' sobrio di quello predefinito del browser. */
@supports not (background: color-mix(in srgb, red 22%, white)) {
    .pt-evid { background: #fff3c4; }
}

/* Nel titolo del modale, che e' gia' grande e colorato, basta meno. */
.me-modale-titolo .pt-evid {
    background: color-mix(in srgb, var(--me-sala, #1565C0) 16%, #fff);
    font-weight: inherit;
}

/* =====================================================================
   prog_time.php — la ricerca guarda tutto il congresso
   ===================================================================== */

/* Una precisazione nell'intestazione dei risultati, quando fra questi
   ci sono sessioni di altre giornate. */
.pt-risultati-nota {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--me-rosso, #C62828) 10%, #fff);
    color: var(--me-rosso, #C62828);
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .pt-risultati-nota { background: #fdeaea; }
}

/* Un risultato che non appartiene alla giornata mostrata: la data si
   marca, cosi' non si crede di guardare la griglia qui accanto. Il
   resto resta identico — e' comunque un risultato valido, non un
   ripiego. */
.pt-risultato.is-altro-giorno .pt-risultato-data {
    background: color-mix(in srgb, var(--me-sala, #1565C0) 14%, #fff);
    color: var(--me-sala, #1565C0);
    font-weight: 700;
    border-radius: 3px;
    padding: 0 4px;
    margin: 0 -4px;
}

@supports not (background: color-mix(in srgb, red 14%, white)) {
    .pt-risultato.is-altro-giorno .pt-risultato-data {
        background: #eef4fb;
    }
}

/* =====================================================================
   prog_time.php — l'attesa, e i comandi che non ricaricano
   ===================================================================== */

/* L'indicatore che copre il momento in cui il browser disegna il
   programma. Su un congresso grande sono poche decine di millisecondi,
   ma senza un segno lo schermo resterebbe vuoto senza spiegazione. */
.pt-attesa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px;
    color: var(--me-testo-tenue, #5a6672);
    font-size: .9rem;
}

.pt-attesa-cerchio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--me-bordo, #dfe3e8);
    border-top-color: var(--me-rosso, #C62828);
    border-radius: 50%;
    animation: pt-gira .7s linear infinite;
    flex-shrink: 0;
}

@keyframes pt-gira {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pt-attesa-cerchio { animation: none; }
}

/* I pulsanti delle viste e dei giorni sono <button>, non collegamenti:
   non ricaricano la pagina. Devono pero' somigliare a quelli del resto
   del sito, che sono <a>. */
.pt-viste .me-stampa-tab-voce,
#ptGiorni .me-filtro-sala,
#ptSale .me-filtro-sala {
    font: inherit;
    cursor: pointer;
}

#ptGiorni .me-filtro-sala,
#ptSale .me-filtro-sala {
    background: #fff;
}

#ptGiorni .me-filtro-sala.is-attivo,
#ptSale .me-filtro-sala.is-attivo {
    background: var(--me-sala, var(--me-rosso, #C62828));
    border-color: var(--me-sala, var(--me-rosso, #C62828));
    color: #fff;
}

/* La ricerca non ha piu' il pulsante "Cerca": filtra mentre si scrive.
   Resta solo l'azzeramento, che compare quando c'e' qualcosa da
   azzerare. */
.pt-cerca {
    position: relative;
}

.pt-azzera {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

/* Il collegamento ai risultati di un'altra giornata, dentro la riga
   che riassume la ricerca nell'elenco. */
.pt-link-altrove {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--me-rosso, #C62828);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.pt-link-altrove:hover {
    text-decoration: none;
}

/* =====================================================================
   prog_time.php — i risultati della ricerca, a piena pagina
   ===================================================================== */

/* Durante la ricerca la griglia lascia il posto ai risultati: cercando
   non serve, e un elenco sopra una griglia — ciascuno col proprio
   scorrimento, dentro una pagina che gia' scorre — non si capisce.
   Qui l'unico scorrimento verticale e' quello della pagina. */

.pt-esito {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 0 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--me-bordo, #dfe3e8);
}

.pt-esito-testo {
    flex: 1;
    min-width: 200px;
    font-size: .92rem;
    color: var(--me-testo, #23303c);
}

.pt-esito-nota {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 9px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--me-rosso, #C62828) 10%, #fff);
    color: var(--me-rosso, #C62828);
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .pt-esito-nota { background: #fdeaea; }
}

.pt-esito-chiudi {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--me-bordo, #dfe3e8);
    color: var(--me-testo-tenue, #5a6672);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.pt-esito-chiudi::before {
    content: '\2190';
    font-size: .9rem;
}

.pt-esito-chiudi:hover,
.pt-esito-chiudi:focus-visible {
    background: #eef1f4;
    border-color: #cbd2d9;
    color: var(--me-testo, #23303c);
}

/* Le righe dei risultati: separate da una linea sottile, senza
   riquadro attorno — sono parte della pagina, non una finestra. */
.pt-elenco-risultati li {
    border-bottom: 1px solid #eef1f4;
}

.pt-elenco-risultati .pt-risultato {
    padding: 13px 14px 13px 12px;
    align-items: flex-start;
}

/* Perche' questa sessione e' fra i risultati: il nome del relatore o
   del moderatore che corrisponde. Senza, davanti a un titolo che non
   contiene il termine cercato ci si chiede cosa ci faccia li'. */
.pt-risultato-centro {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pt-risultato-chi {
    font-size: .8rem;
    color: var(--me-testo-tenue, #5a6672);
}

@media (max-width: 600px) {
    .pt-esito {
        gap: 10px;
    }

    .pt-esito-chiudi {
        flex-basis: 100%;
        justify-content: center;
    }

    .pt-elenco-risultati .pt-risultato {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .pt-risultato-centro {
        flex-basis: 100%;
        order: 3;
    }
}

/* =====================================================================
   prog_time.php — la versione stampabile
   ===================================================================== */

/* Una riga discreta sopra i comandi: chi cerca il PDF lo trova subito,
   chi consulta il programma a schermo non ne e' disturbato. */
.pt-stampabile {
    display: flex;
    align-items: center;
    gap: 6px 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    /* Stacco dall'intestazione: la riga e' il primo elemento del
       contenuto, e senza margine si attacca alla fascia del titolo. */
    margin: 18px 0 14px;
    border: 1px solid var(--me-bordo, #dfe3e8);
    border-radius: 10px;
    background: #fafbfc;
    font-size: .86rem;
}

/* L'icona: un foglio, disegnato col carattere invece che con
   un'immagine — non c'e' nulla da caricare. */
.pt-stampabile::before {
    content: '\1F4C4';
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.pt-stampabile-testo {
    color: var(--me-testo-tenue, #5a6672);
}

.pt-stampabile-link {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pt-stampabile-link a {
    color: var(--me-rosso, #C62828);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}

.pt-stampabile-link a:hover,
.pt-stampabile-link a:focus-visible {
    border-bottom-color: currentColor;
}

.pt-stampabile-sep {
    color: var(--me-bordo, #dfe3e8);
}


@media (max-width: 600px) {
    .pt-stampabile {
        padding: 9px 12px;
        font-size: .82rem;
        gap: 6px 10px;
    }

    /* La DICITURA resta su una riga sola: spezzarla su due sprecherebbe
       spazio verticale per nulla. */
    .pt-stampabile-testo {
        white-space: nowrap;
    }

    /* I COLLEGAMENTI invece vanno a capo liberamente. Tenerli in fila
       li farebbe uscire dallo schermo, e su un telefono quello che esce
       e' semplicemente perduto: meglio due righe che un nome tagliato. */
    .pt-stampabile-link {
        flex-wrap: wrap;
        gap: 6px 8px;
    }

    .pt-stampabile-link a {
        padding: 2px 0;
    }
}

/* =====================================================================
   prog_time.php — la timetable si adatta alla pagina
   ===================================================================== */

/* La griglia esce dal contenitore del sito e usa tutta la larghezza
   dello schermo: con otto o undici sale lo spazio guadagnato e' la
   differenza fra colonne leggibili e colonne inutili.

   Il trucco e' un margine negativo pari a meta' della differenza fra
   la larghezza della finestra e quella del contenitore: la griglia si
   ricentra sullo schermo invece che sul testo. Il resto della pagina
   non si muove. */
.pt-griglia-larga {
    /* Il 90% della finestra, non il 100: un margine ai lati fa respirare
       la griglia e la distingue dal bordo dello schermo, senza rinunciare
       allo spazio che serve alle sale.

       I margini negativi la ricentrano sulla FINESTRA invece che sul
       contenitore del testo: e' la meta' della differenza fra le due
       larghezze. */
    width: 90vw;
    margin-left: calc(50% - 45vw);
    margin-right: calc(50% - 45vw);
    box-sizing: border-box;
}

/* Niente scorrimento orizzontale: le colonne si dividono lo spazio che
   c'e'. Resta la possibilita' di scorrere solo dove serve davvero — su
   schermo stretto, dove la griglia cede comunque il posto all'elenco
   per sala (vedi la regola a 860px). */
.pt-griglia-larga .me-griglia-scroll {
    /* Entrambi visibili, ed e' necessario: basta che uno dei due sia
       diverso da visible perche' il browser renda l'altro scorrevole, e
       un antenato scorrevole impedisce a position:sticky di funzionare —
       l'intestazione delle sale non resterebbe in vista. */
    overflow-x: visible;
    overflow-y: visible;
}

/* Sotto una certa larghezza di colonna il titolo non ci sta comunque:
   si riduce il corpo prima di arrendersi. */
@media (max-width: 1100px) {
    .me-blocco-titolo { font-size: 11px; }
    .me-blocco-ora { font-size: 9.5px; }
    .me-griglia-sala { font-size: 10.5px; padding: 8px 5px 6px; }
}

/* =====================================================================
   materiali.php — l'elenco dei comunicati (sezione rimossa alla #127:
   queste regole restano per le voci ancora in uso)
   =====================================================================
   I PDF li carica l'ufficio stampa da comunicati_upload.php e finiscono
   nella cartella "comunicati": qui si elencano, dal piu' recente.
   ===================================================================== */

.me-com-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}

.me-com-voce + .me-com-voce {
    border-top: 1px solid #eef1f4;
}

.me-com-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}

.me-com-link:hover,
.me-com-link:focus-visible {
    background: #f5f8fb;
    outline: none;
}

/* Il segno del documento: tre lettere invece di un'immagine — non c'e'
   nulla da caricare, e si legge anche se i caratteri speciali non
   arrivano. */
.me-com-icona {
    flex-shrink: 0;
    width: 40px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--me-rosso, #C62828);
    border-radius: 5px;
    color: var(--me-rosso, #C62828);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.me-com-testo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.me-com-titolo {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.me-com-link:hover .me-com-titolo {
    color: var(--me-rosso, #C62828);
}

.me-com-dati {
    font-size: .8rem;
    color: var(--me-testo-tenue, #5a6672);
}

@media (max-width: 600px) {
    .me-com-link {
        gap: 11px;
        padding: 12px 2px;
    }
    .me-com-icona {
        width: 34px;
        height: 40px;
        font-size: .58rem;
    }
    .me-com-titolo {
        font-size: .9rem;
    }
}

/* Il rimando ai comunicati quando la sintesi non e' disponibile: senza le
   schede quella vista non avrebbe alcuna uscita. */
.me-stampa-rimando {
    text-align: center;
    margin: 18px 0 0;
}

.me-stampa-rimando a {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid var(--me-bordo, #dfe3e8);
    border-radius: 8px;
    background: #fff;
    color: var(--me-rosso, #C62828);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
}

.me-stampa-rimando a:hover {
    background: var(--me-rosso, #C62828);
    color: #fff;
}

/* =====================================================================
   AREA STAMPA — la riga della sessione
   =====================================================================
   Titolo e pulsante di scarico condividono una riga sola. Prima il
   pulsante stava in un blocco sotto la testata: sprecava una riga e
   sembrava staccato dalla sessione a cui appartiene.

   Sono due comandi distinti — il titolo apre l'elenco, il pulsante
   scarica il documento — e non possono stare annidati: un collegamento
   dentro un pulsante non e' HTML valido. Convivono quindi affiancati,
   con il titolo che si allarga a prendere lo spazio che resta.
   ===================================================================== */

.me-stampa-riga {
    display: flex;
    align-items: stretch;
}

/* La testata prende tutto lo spazio che il pulsante non usa. */
.me-stampa-riga .me-stampa-testa {
    flex: 1;
    min-width: 0;
}

/* Il pulsante del documento di sessione.
   Volutamente piu' sobrio dei pulsanti delle singole sintesi: quelli
   sono l'azione abituale, questo l'alternativa comoda. Se avessero lo
   stesso peso visivo l'occhio non saprebbe dove andare. */
.me-stampa-intera-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    margin: 10px 12px 10px 0;
    border: 1px solid #b9c3d0;
    border-radius: 7px;
    /* Fondo bianco, sempre: era trasparente, e sul pannello grigio
       spariva. Al passaggio del mouse diventava bianco, ma su telefono
       il mouse non c'e' e il pulsante restava invisibile — segnalato dal
       cliente: "sui dispositivi questo non accade".
       Il bianco su #e4e9ef vale 1,22:1, lo stesso stacco del pannello
       dalla pagina. Resta comunque l'azione secondaria: il bordo e' piu'
       definito ma il fondo non e' pieno di colore come "Leggi la sintesi",
       che e' rosso. */
    background: #fff;
    color: var(--me-testo);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.25;
    white-space: nowrap;
}

.me-stampa-intera-link i {
    color: var(--me-rosso);
    font-size: 15px;
}

/* Il fondo e' gia' bianco: al passaggio del mouse cambiano bordo e
   testo, che e' cio' che resta da cambiare. */
.me-stampa-intera-link:hover,
.me-stampa-intera-link:focus {
    border-color: var(--me-rosso);
    color: var(--me-rosso);
    background: var(--me-rosso-tenue);
}

/* Quante sintesi contiene: chi legge sa cosa sta per scaricare, e si
   accorge se una relazione manca ancora all'appello. */
.me-stampa-intera-n {
    display: inline-block;
    min-width: 19px;
    padding: 1px 6px;
    border-radius: 9px;
    background: #eef1f4;
    color: var(--me-testo-tenue);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.me-stampa-intera-link:hover .me-stampa-intera-n {
    background: var(--me-rosso);
    color: #fff;
}

/* ---------------------------------------------------------------------
   AREA STAMPA SU TELEFONO
   ---------------------------------------------------------------------
   Un solo blocco per schermo stretto. Prima ce n'erano due, a 600px e a
   640px, e sotto i 600 si sommavano: il "flex-basis: 100%" sul conteggio
   deformava la riga e il titolo restava schiacciato in una colonna
   stretta, allineato di fatto a destra, allungando la pagina.
   Il cliente: "il titolo risulta tutto allineato a destra per lasciare
   lo spazio al pulsante, risultando brutto e allunga la pagina".

   L'impianto su telefono e' un altro: il titolo prende TUTTA la
   larghezza, perche' e' la cosa che si legge; il resto gli sta sotto.
   Pensato per chi non ha dimestichezza col telefono: testo grande,
   margini generosi, comandi larghi e distanti fra loro.
   --------------------------------------------------------------------- */

@media (max-width: 640px) {

    /* Le due sezioni una sopra l'altra: affiancate sarebbero due
       bersagli stretti e vicini. */
    .me-stampa-tab { flex-direction: column; }

    /* --- La riga della sessione diventa una colonna --- */
    .me-stampa-riga {
        display: block;
    }

    /* La testata: il titolo sopra, il conteggio e la freccia sotto.
       "wrap" invece di ordini e basi in percentuale, che e' cio' che
       prima deformava tutto. */
    .me-stampa-riga .me-stampa-testa {
        width: 100%;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 10px;
        padding: 15px 16px 13px;
    }

    /* Il titolo su tutta la larghezza, e piu' grande: e' il testo che
       la persona cerca. */
    .me-stampa-titolo {
        /* "flex: 0 0 100%" faceva sbordare il titolo: la base 100% si
           calcola sul contenitore SENZA sottrarre il gap, e con
           "0" come flex-shrink l'elemento non poteva rientrare.
           Il risultato era un titolo tagliato a destra e la pagina che
           scorreva di lato. Qui la base e' automatica e min-width: 0
           lascia che il testo vada a capo davvero. */
        flex: 1 1 100%;
        min-width: 0;
        font-size: 16.5px;
        line-height: 1.4;
        /* Una parola piu' lunga della riga si spezza invece di sforare */
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Conteggio e freccia sulla riga sotto, a sinistra: la freccia
       resta il segno che la sessione si apre. */
    .me-stampa-quante {
        font-size: 13.5px;
    }
    /* La freccia e' il segno che la sessione si apre: su telefono deve
       vedersi. Piccola e tenue, chi non ha dimestichezza non la nota e
       non capisce che il riquadro si puo' toccare. */
    .me-stampa-freccia {
        font-size: 20px;
        margin-left: auto;   /* all'estremita' destra */
    }

    /* --- Il pulsante del documento di sessione --- */
    /* A tutta larghezza sotto il titolo: un bersaglio ampio si tocca
       senza mirare. */
    .me-stampa-intera-link {
        display: flex;
        justify-content: center;
        margin: 0 16px 16px;
        padding: 13px 16px;
        font-size: 14.5px;
        border-radius: 8px;
    }
    .me-stampa-intera-link i {
        font-size: 16px;
    }

    /* --- Le relazioni dentro la sessione --- */
    .me-stampa-corpo {
        padding: 2px 16px 12px;
    }

    /* Relatore e titolo sopra, il pulsante sotto: in fila sarebbero
       tre cose compresse in una riga di 320 pixel. */
    .me-stampa-relazione {
        display: block;
        padding: 14px 0;
    }
    .me-stampa-rel-testo {
        min-width: 0;
        margin-bottom: 10px;
    }
    /* Il nome del relatore e' il riferimento con cui si cerca: piu'
       marcato del resto, come il titolo della sessione. */
    .me-stampa-rel-relatore {
        font-size: 15.5px;
        font-weight: 700;
    }
    .me-stampa-rel-titolo {
        font-size: 14px;
        color: var(--me-testo);   /* piu' contrasto: il grigio tenue su
                                     telefono, con poca luce, si perde */
    }
    .me-stampa-pdf {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 11px 15px;
        font-size: 14px;
    }
    .me-stampa-attesa {
        display: block;
        text-align: center;
        padding: 9px 0 2px;
        font-size: 13.5px;
    }
}


/* La citta' accanto al nome, negli eventi aziendali.
   Corsivo e un po' piu' piccola del nome: si legge come un inciso, senza
   rubare l'occhio al nome del relatore. */
.me-citta {
    font-style: italic;
    font-size: 0.92em;
    opacity: 0.78;
}

/* =====================================================================
   AREA STAMPA — le due colonne dei comunicati

   Due colonne sullo schermo grande, una sul telefono: lo decide il
   foglio di stile con una griglia, non il PHP, cosi' l'ordine delle
   voci resta lo stesso in entrambi i casi — sul telefono le colonne si
   impilano, prima "Materiali stampa" e poi "Comunicati stampa".
   ===================================================================== */
.me-com-colonne {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}

@media (min-width: 760px) {
    .me-com-colonne {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

.me-com-colonna {
    min-width: 0;   /* un titolo lungo non deve allargare la colonna */
}

/* Il titolo della colonna: si distingue dall'elenco senza competere col
   titolo della pagina. */
.me-com-intestazione {
    font-size: 1rem;
    font-weight: 700;
    color: var(--me-rosso);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--me-bordo);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Una colonna vuota: si dice, invece di lasciare il vuoto e far
   credere che la pagina sia rotta. */
.me-vuoto-colonna {
    padding: 18px 14px;
    font-size: .9rem;
}

/* L'icona di un link.

   Si distingue dal PDF cambiando il COLORE del contorno e del testo, non
   riempiendola: l'icona del PDF e' un contorno con il testo colorato e il
   fondo trasparente, e un fondo pieno accanto a quella rompeva lo schema
   invece di affiancarsi. Il grigio del tema sta accanto al rosso senza
   competere: distingue senza farsi notare piu' del titolo. */
.me-com-icona-link {
    border-color: var(--me-testo-tenue);
    color: var(--me-testo-tenue);
}

/* =====================================================================
   FOTOGALLERY del congresso

   Tre viste nella stessa pagina: i pannelli delle giornate, la griglia
   delle miniature, il visore a schermo pieno.
   ===================================================================== */

/* --- I pannelli delle giornate: a larghezza piena, uno sotto l'altro.
       Il mosaico di quattro anteprime a sinistra da' un'idea del
       contenuto senza aprire. --- */
.me-gal-elenco {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.me-gal-pannello {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    /* Altezza MINIMA, non fissa: i pannelli restano uguali fra loro
       quando il contenuto e' uguale, ma possono crescere se un testo
       chiede piu' spazio. Con `height` fissa le scritte venivano
       tagliate sul telefono — misurato: lo spazio per il testo era
       62px e il testo ne chiedeva 60, margine zero, e bastava un
       carattere di sistema piu' alto per perdere il conteggio delle
       foto.

       Serve comunque un minimo, altrimenti con poche giornate la
       pagina diventa una colonna di riquadri alti il doppio del
       necessario. */
    min-height: 104px;
    padding: 0;
    border: 1px solid var(--me-bordo);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.me-gal-pannello:hover,
.me-gal-pannello:focus-visible {
    border-color: var(--me-rosso);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
    transform: translateY(-1px);
    outline: none;
}

/* Il mosaico: quattro anteprime in due righe. Larghezza fissa, cosi' il
   testo accanto comincia sempre allo stesso punto anche se una raccolta
   ha meno di quattro foto. */
.me-gal-mosaico {
    flex-shrink: 0;
    /* 136px su 104 di altezza da' celle di 67x51, cioe' quasi 4:3 —
       le proporzioni di una foto. Con `object-fit: cover` il taglio
       c'e' comunque, ma una cella vicina al formato della foto ne
       taglia meno: a 168px le celle venivano 83x51, rettangoli
       schiacciati che tagliavano mezza immagine. */
    width: 136px;
    /* Altezza propria, non `height: 100%`: con l'altezza del pannello
       diventata MINIMA (e non fissa), quel 100% non ha piu' un
       riferimento e la griglia prendeva l'altezza del suo contenuto —
       136px, cioe' la sua larghezza, allungando il pannello a 138.
       `align-self: stretch` lo fa comunque crescere insieme al
       pannello quando il testo chiede piu' spazio. */
    height: 104px;
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    background: var(--me-bordo);
    overflow: hidden;
}
.me-gal-mosaico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 0;
}
/* Con una sola foto riempie tutto il riquadro invece di lasciarlo a
   tre quarti vuoto. */
.me-gal-mosaico img:only-child {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.me-gal-testo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 12px 16px;
    /* NON si nasconde cio' che esce: era questo a tagliare il
       conteggio delle foto sul telefono. Il troncamento con i puntini
       resta sul nome e sul sottotitolo, dove serve a non sfondare la
       LARGHEZZA; in altezza il pannello cresce invece di tagliare.
       `min-width: 0` sopra permette ai figli di accorciarsi. */
}
.me-gal-nome {
    font-size: 1rem;
    font-weight: 700;
    color: var(--me-testo);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.me-gal-sotto {
    font-size: .86rem;
    color: var(--me-testo-tenue);
    line-height: 1.3;
    /* Su una riga sola: due righe di sottotitolo sforerebbero
       l'altezza del pannello. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.me-gal-quante {
    margin-top: 3px;
    font-size: .79rem;
    font-weight: 600;
    color: var(--me-rosso);
    font-variant-numeric: tabular-nums;
}

.me-gal-freccia {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 16px 0 4px;
    font-size: 1.6rem;
    color: var(--me-bordo);
    transition: color .15s;
}
.me-gal-pannello:hover .me-gal-freccia { color: var(--me-rosso); }

/* Sul telefono il mosaico sta sopra, a tutta larghezza: 168px di
   anteprima piu' il testo non ci starebbero. */
@media (max-width: 560px) {
    /* Sul telefono il mosaico sta sopra, a tutta larghezza: 136px di
       anteprima piu' il testo non ci starebbero affiancati.

       L'altezza e' MINIMA, non fissa: impilando le due parti servono
       96px di mosaico piu' lo spazio del testo, ma se il testo chiede
       di piu' il pannello cresce invece di tagliarlo. Il minimo serve
       perche' una raccolta senza sottotitolo, da sola, verrebbe 20px
       piu' bassa delle altre — misurato: 162px contro 182. */
    .me-gal-pannello {
        flex-direction: column;
        min-height: 178px;
    }
    .me-gal-mosaico {
        width: 100%;
        /* Altezza fissa QUI va bene: il mosaico e' una striscia di
           anteprime e non deve crescere col testo. `flex-shrink: 0`
           gli impedisce di schiacciarsi quando il testo chiede
           spazio. */
        height: 96px;
        flex-shrink: 0;
    }
    .me-gal-freccia { display: none; }
    .me-gal-testo {
        padding: 10px 14px;
        /* Il testo occupa quello che resta, centrato: cosi' con o senza
           sottotitolo il pannello e' alto lo stesso. */
        flex: 1;
        justify-content: center;
    }
}

/* --- La griglia delle miniature --- */
.me-gal-indietro {
    display: inline-block;
    margin: 0 0 14px;
    padding: 7px 14px;
    border: 1px solid var(--me-bordo);
    border-radius: 20px;
    background: #fff;
    font: inherit;
    font-size: .86rem;
    color: var(--me-testo-tenue);
    cursor: pointer;
}
.me-gal-indietro:hover {
    border-color: var(--me-rosso);
    color: var(--me-rosso);
}

.me-gal-titolo {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--me-testo);
}
.me-gal-sottotitolo {
    margin: 0 0 16px;
    font-size: .9rem;
    color: var(--me-testo-tenue);
}

.me-gal-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
@media (max-width: 480px) {
    .me-gal-griglia {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: 6px;
    }
}

.me-gal-cella {
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--me-fondo);
    cursor: pointer;
    display: block;
    transition: transform .15s, box-shadow .15s;
}
.me-gal-cella:hover,
.me-gal-cella:focus-visible {
    transform: scale(1.03);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    outline: none;
}
.me-gal-cella img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* --- Il visore a schermo pieno --- */
.me-gal-visore {
    position: fixed;
    inset: 0;
    /* Sopra TUTTO il template del sito.

       Con 9999 il visore si apriva ma la X di chiusura non si vedeva:
       il foglio di stile del template (`framework.css`) assegna alle
       barre laterali `z-index: 9999999` e a `.sidebar-tap-close`
       999999, e quegli elementi sono sempre nel documento — anche a
       barra chiusa. Stavano quindi SOPRA il visore, coprendone gli
       angoli.

       Verificato nel foglio del sito: il valore piu' alto in uso e'
       9999999. Qui si sta un ordine di grandezza sopra, cosi' non
       serve ritoccarlo se il template cambia di poco. */
    z-index: 99999999;
    background: rgba(0, 0, 0, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 16px 64px;
}
.me-gal-visore[hidden] { display: none; }

.me-gal-grande {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    /* Il dito che scorre sulla foto cambia immagine: il browser non
       deve interpretarlo come uno scorrimento della pagina. */
    touch-action: pan-y;
}

.me-gal-chiudi,
.me-gal-prec,
.me-gal-succ {
    position: absolute;
    /* Sopra la foto: senza, un'immagine molto grande con un margine
       trasparente potrebbe ricevere il clic al posto del pulsante. */
    z-index: 2;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    font: inherit;
    line-height: 1;
}
.me-gal-chiudi:hover,
.me-gal-prec:hover,
.me-gal-succ:hover { background: rgba(255, 255, 255, .26); }

.me-gal-chiudi {
    top: 12px; right: 12px;
    width: 42px; height: 42px;
    font-size: 26px;
}
.me-gal-prec, .me-gal-succ {
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    font-size: 32px;
}
.me-gal-prec { left: 12px; }
.me-gal-succ { right: 12px; }
.me-gal-prec[hidden], .me-gal-succ[hidden] { display: none; }

.me-gal-piede {
    position: absolute;
    z-index: 2;
    bottom: 0; left: 0; right: 0;
    padding: 14px 16px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: rgba(255, 255, 255, .82);
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
}
.me-gal-piede a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
}
.me-gal-piede a:hover { border-bottom-color: #fff; }

/* Sul telefono i comandi stanno piu' vicini ai bordi: il pollice ci
   arriva, e la foto resta piu' grande. */
@media (max-width: 560px) {
    .me-gal-visore { padding: 48px 6px 58px; }
    .me-gal-prec, .me-gal-succ { width: 40px; height: 40px; font-size: 26px; }
    .me-gal-prec { left: 4px; }
    .me-gal-succ { right: 4px; }
}