/* Rifinitura notturna 09-10/11/2026: ultimo strato del sito, una zona per file (wrep-rif-pubblico.css). */
/* Zona sito pubblico: galleria dei link (link_page.php, anche dentro l'iframe di wrep.eu), elenco e profilo
   dei reporter, certificato, accesso al documento, assistenza. Selettori sempre limitati alla pagina. */

/* ---------- Galleria dei link certificati (home e versione da iframe) ---------- */
/* «Link per volta»: pulsanti da 44px anche in altezza (erano 44x40). */
#link .wrep-gallery-per-volta button { min-height: 44px; }
/* Il nome del reporter e' un link da toccare: area di 44px senza cambiare l'aspetto della scheda. */
#link .wrep-certified-link .entry-title a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#link .wrep-certified-link .entry-title { margin-block: 0 4px; }
#link .wrep-certified-link .entry p { overflow-wrap: anywhere; }

/* Versione da iframe (body.wrep-link-incorporati): non carica wrep-rif-globale.css, quindi qui le stesse regole
   di lettura del telefono e un fondo che non tocca il selettore «Link per volta». */
body.wrep-link-incorporati #link { padding-bottom: 32px; }
@media (max-width: 767px) {
  body.wrep-link-incorporati .wrep-certified-link .entry p,
  body.wrep-link-incorporati .wrep-gallery-loading { font-size: 16px; }
  body.wrep-link-incorporati .wrep-gallery-empty-label { font-size: 13px; }
}

/* ---------- Elenco dei reporter (/wrep) ---------- */
/* Etichette e campi alla stessa altezza: il campo di ricerca era alto 52px, «Visualizza» 44px e piu' in basso. */
html[data-wrep-pagina="reporters"] .wrep-elenco-controlli label { font-weight: 700; }
html[data-wrep-pagina="reporters"] .wrep-elenco-controlli select { height: 52px; min-height: 52px; }
html[data-wrep-pagina="reporters"] .wrep-elenco-controlli > .btn,
html[data-wrep-pagina="reporters"] .wrep-elenco-controlli > .ux2-shl-filtri-apri { min-height: 52px; }
@media (max-width: 767px) {
  html[data-wrep-pagina="reporters"] .wrep-page-intro p,
  html[data-wrep-pagina="reporters"] .ux-pub-legenda { font-size: 16px; }
  html[data-wrep-pagina="reporters"] .wrep-reporter-name > span:first-child { font-size: 15px; }
}
/* Legenda: icona e testo sulla stessa riga anche a 320px (l'icona restava sola sopra il testo). */
html[data-wrep-pagina="reporters"] .ux-pub-legenda {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
html[data-wrep-pagina="reporters"] .ux-pub-legenda > img { flex: 0 0 22px; margin-top: 1px; }
html[data-wrep-pagina="reporters"] .ux-pub-legenda { flex-wrap: nowrap; }
html[data-wrep-pagina="reporters"] .ux-pub-legenda > span { flex: 1 1 auto; min-width: 0; }
/* Nomi senza spazi lunghissimi: vanno a capo con il trattino dove la lingua lo permette. */
html[data-wrep-pagina="reporters"] .wrep-reporter-name h3 { hyphens: manual; overflow-wrap: break-word; } /* a capo sui trattini del nome, mai a meta di una parola che ci sta */

/* ---------- Profilo pubblico del reporter ---------- */
/* Comandi dei link certificati: 44px (erano 40x40, troppo piccoli per il pollice). */
html[data-wrep-pagina="reporter"] #tabella-link .wrep-lc-comandi .wrep-cert-icon-button {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
}
html[data-wrep-pagina="reporter"] #tabella-link .wrep-lc-certificato { height: 44px; }
html[data-wrep-pagina="reporter"] #tabella-link_paginate .paginate_button { min-width: 44px; min-height: 44px; }
html[data-wrep-pagina="reporter"] #tabella-link .wrep-lc-titolo { overflow-wrap: break-word; word-break: normal; } /* niente trattini ne «anywhere»: nella tabella restringerebbero la colonna spezzando parole normali */
/* Da 992 a 1199px la colonna del nome restava di ~220px accanto al QR: l'indirizzo si spezzava a meta'
   («rossi.mario.90 / 01»). In questa fascia nome, QR e distintivi vanno uno sotto l'altro, come sul tablet. */
@media (min-width: 992px) and (max-width: 1199px) {
  html[data-wrep-pagina="reporter"] .wrep-reporter-summary:has(.wrep-reporter-identita) { display: block; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-summary:has(.wrep-reporter-identita) > .wrep-reporter-summary-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-summary:has(.wrep-reporter-identita) > .wrep-reporter-summary-head > * { grid-column: 1; grid-row: auto; }
  /* Giro 4: il pulsante del QR e il biglietto da visita occupano tutta la scheda, come sotto i 992px
     (a 360px restavano appoggiati a sinistra con 240-360px vuoti a destra). */
  html[data-wrep-pagina="reporter"] .wrep-reporter-summary:has(.wrep-reporter-identita) .wrep-reporter-identita { max-width: none; width: 100%; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-identita details .wrep-reporter-qr { max-width: none; width: auto; margin-inline: 0; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-summary:has(.wrep-reporter-identita) > .wrep-reporter-credenziali { margin-top: 20px; }
}
/* L'indirizzo pubblico va a capo dopo il dominio (<wbr> in reporter.php); a meta' del codice solo se non c'e' altro modo. */
html[data-wrep-pagina="reporter"] .wrep-reporter-public-url,
html[data-wrep-pagina="reporter"] .wrep-reporter-mobile-heading small { overflow-wrap: break-word; word-break: normal; }
html[data-wrep-pagina="reporter"] .wrep-reporter-summary-copy h3,
html[data-wrep-pagina="reporter"] .wrep-reporter-mobile-nome { hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 767px) {
  html[data-wrep-pagina="reporter"] .wrep-reporter-mobile-heading small { font-size: 14px; }
  html[data-wrep-pagina="reporter"] #accordion .panel-heading > a { font-size: 16px; }
  /* «Visualizza» e «Cerca»: il campo di ricerca prende lo spazio rimasto, il segnaposto non resta tagliato. */
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper {
    grid-template-columns: auto minmax(0, 1fr);
  }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_filter input { text-overflow: ellipsis; }
}

/* ---------- Certificato (/certificate/...) ---------- */
/* Sul telefono il marchio stretto lasciava al titolo 160px: cinque righe per «Link certificato nella blockchain WREP». */
@media (max-width: 479px) {
  html[data-wrep-pagina="certificazionelink"]:not(.wrep-incorniciato) .wrep-certificate-record {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }
  html[data-wrep-pagina="certificazionelink"]:not(.wrep-incorniciato) .wrep-certificate-record > img {
    width: 44px;
    height: 44px;
  }
  html[data-wrep-pagina="certificazionelink"]:not(.wrep-incorniciato) .wrep-certificate-record h2 { font-size: 18px; }
}
/* «Link certificato» con lo stesso stile delle altre etichette (Data, Reporter, ID seriale). */
html[data-wrep-pagina="certificazionelink"]:not(.wrep-incorniciato) .wrep-certificate-oggetto > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
html[data-wrep-pagina="certificazionelink"] .wrep-certificate-oggetto > small { font-size: 15px; }
/* Il link certificato e' il comando principale della scheda: area di tocco di 44px senza spostare il testo. */
html[data-wrep-pagina="certificazionelink"] .wrep-certificate-oggetto > a { padding-block: 11px; margin-block: -11px; overflow-wrap: break-word; }
/* «Come funziona la certificazione»: link da 44px accanto (o sotto) a «Condividi». */
html[data-wrep-pagina="certificazionelink"] .wrep-cert-come {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
html[data-wrep-pagina="certificazionelink"] .wrep-ux2-verifica-altro a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 767px) {
  html[data-wrep-pagina="certificazionelink"] .wrep-ux-cert-aiuto,
  html[data-wrep-pagina="certificazionelink"] .wrep-ux2-verifica-errore { font-size: 16px; }
  html[data-wrep-pagina="certificazionelink"] .wrep-ux2-verifica label { font-size: 15px; }
}

/* ---------- Accesso al documento (file_view.php) ---------- */
html[data-wrep-pagina="file_view"] .wrep-file-mostra { min-height: 44px; }
@media (max-width: 767px) {
  html[data-wrep-pagina="file_view"] .wrep-file-access-error { font-size: 16px; }
}

/* ---------- Assistenza (/support) ---------- */
@media (max-width: 767px) {
  html[data-wrep-pagina="assistenza"] .wrep-page-intro p,
  html[data-wrep-pagina="assistenza"] .wrep-campo-aiuto { font-size: 16px; }
  html[data-wrep-pagina="assistenza"] .wrep-support-form label { font-size: 15px; }
}
/* Recapito sotto «Email» e «WhatsApp»: 12px erano troppo piccoli per un indirizzo da copiare. */
html[data-wrep-pagina="assistenza"] .wrep-support-channel small { font-size: 14px; }
/* Senza tessera il pulsante del QR e' il primo elemento della scheda: niente margine sopra oltre al bordo interno. */
html[data-wrep-pagina="reporter"] .wrep-reporter-identita > details.wrep-reporter-qr-disclosure:first-child { margin-top: 0; }
/* Da 992px i comandi dei link stanno in colonna: «Certificato» parte sempre dallo stesso punto, anche nelle righe
   senza anteprima (prima scivolava a destra e le colonne non erano allineate). */
@media (min-width: 992px) {
  html[data-wrep-pagina="reporter"] #tabella-link .wrep-lc-comandi {
    justify-content: flex-start;
    min-width: 232px;
  }
}

/* ---------- Profilo: piede della tabella «Link certificati» (giro 2) ---------- */
/* Sotto i 992px la paginazione stava in mezza colonna e andava a capo su 2-3 righe («Precedente», numeri,
   «Successiva»). Ora conteggio e paginazione hanno una riga intera ciascuno, i comandi stanno su una riga sola:
   «Precedente» a sinistra, numeri al centro, «Successiva» a destra. */
@media (max-width: 991px) {
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_info,
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_paginate {
    grid-column: 1 / -1;
    padding-top: 0;
  }
  html[data-wrep-pagina="reporter"] #tabella-link_paginate {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  html[data-wrep-pagina="reporter"] #tabella-link_paginate > span {
    display: flex;
    flex: 0 1 auto;
    justify-content: center;
    gap: 6px;
    min-width: 0;
  }
  html[data-wrep-pagina="reporter"] #tabella-link_paginate .paginate_button { margin: 0 !important; }
}
/* Telefono e tablet stretto: fra «Precedente» e «Successiva» solo la pagina corrente (il conteggio sopra dice
   «Da 11 a 20 su 50»); i due comandi si dividono la riga, comodi per il pollice. */
@media (max-width: 767px) {
  html[data-wrep-pagina="reporter"] #tabella-link_paginate > span > :not(.current) { display: none !important; }
  html[data-wrep-pagina="reporter"] #tabella-link_paginate .paginate_button.previous,
  html[data-wrep-pagina="reporter"] #tabella-link_paginate .paginate_button.next {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px !important;
    justify-content: center;
    white-space: nowrap;
  }
}
/* Da 992px il clearfix di DataTables diventava un elemento flessibile e lasciava 24px dopo «Successiva»: ora la
   paginazione arriva al bordo destro della tabella. */
@media (min-width: 992px) {
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper::before,
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper::after { display: none; }
}
/* «Visualizza» e «Cerca»: rientro di 12px come gli altri campi del sito (erano 4-5px, il «10» toccava il bordo),
   freccia della select staccata dal bordo. */
html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_length select {
  padding: 0 34px 0 12px !important;
  background-position: right 12px center !important;
}
html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_filter input { padding-inline: 12px !important; }
/* Telefono: la select dei numeri non serve larga, lo spazio va al campo di ricerca e il segnaposto si legge intero. */
@media (max-width: 575px) {
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper { grid-template-columns: 82px minmax(0, 1fr) !important; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_length select { width: 100% !important; min-width: 0; }
}

/* ---------- Testi di lettura a 16px sul telefono, anche in orizzontale (giro 2) ---------- */
/* Le regole sopra valevano solo sotto i 768px: a 667x375 e 844x390 introduzioni, aiuti ed errori tornavano a
   14-15px. Il telefono in orizzontale si riconosce dall'altezza bassa. */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
  html[data-wrep-pagina="certificazionelink"]:not(.wrep-incorniciato) .wrep-certificate-intro,
  html[data-wrep-pagina="certificazionelink"]:not(.wrep-incorniciato) .wrep-certificate-result,
  html[data-wrep-pagina="certificazionelink"] .wrep-ux-cert-aiuto,
  html[data-wrep-pagina="certificazionelink"] .wrep-ux2-verifica-errore,
  html[data-wrep-pagina="file_view"] .wrep-certificate-intro,
  html[data-wrep-pagina="file_view"] .wrep-file-access-error,
  html[data-wrep-pagina="assistenza"] .wrep-page-intro p,
  html[data-wrep-pagina="assistenza"] .wrep-campo-aiuto,
  html[data-wrep-pagina="reporters"] .wrep-page-intro p,
  html[data-wrep-pagina="reporters"] .ux-pub-legenda,
  html[data-wrep-pagina="reporter"] #accordion .panel-body,
  html[data-wrep-pagina="reporter"] #accordion .panel-heading > a,
  html[data-wrep-pagina="certificazionelink"]:not(.wrep-incorniciato) .wrep-certificate-oggetto > small,
  body.wrep-link-incorporati .wrep-certified-link .entry p { font-size: 16px; }
  html[data-wrep-pagina="certificazionelink"] .wrep-ux2-verifica label,
  html[data-wrep-pagina="assistenza"] .wrep-support-form label { font-size: 15px; }
}
/* Password del documento: a 320px il segnaposto «Inserisci la password» restava tagliato dal «Mostra» interno. */
html[data-wrep-pagina="file_view"] #wrep-file-password { padding-left: 12px; padding-right: 86px; }
/* Nome del reporter nel certificato: area di tocco di 44px (era 86x20) senza spostare la riga. */
html[data-wrep-pagina="certificazionelink"] .wrep-certificate-record dd a.wrep-cert-reporter {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}
/* QR ingrandito di un link: il riquadro bianco segue il QR (in orizzontale l'immagine, limitata dall'altezza,
   restava appoggiata a sinistra con 180px bianchi a destra). La X ha un fondo pieno: attraverso quello
   semitrasparente si vedevano le righe del menu che sta sotto. */
html[data-wrep-pagina="reporter"] #qrcode_grande { width: fit-content; }
html[data-wrep-pagina="reporter"] #qrcode_grande img {
  width: min(464px, calc(100vw - 40px - 2 * clamp(18px, 3vw, 28px)), 80svh);
  max-width: none;
  margin-inline: auto;
}
html[data-wrep-pagina="reporter"] .wrep-qr-close { background: #0c1c27; }
/* Titolo «Profilo reporter» allineato al contenuto: la scheda e' larga al massimo 1080px, il titolo seguiva
   il contenitore da 1200 e da ~1120px partiva 60px piu' a sinistra delle schede. */
/* Giro 4: titolo e scheda alla larghezza del guscio del sito (1200px, come /wrep e /links): con 1080px
   partivano 60px piu' a destra di logo e percorso e finivano 60px prima. */
html[data-wrep-pagina="reporter"] section.page-title > .container,
html[data-wrep-pagina="reporter"] .wrep-reporter-profile > .container { max-width: 1200px; }
/* Da 576 a 767px l'intestazione aveva ancora due colonne (la seconda vuota): il pulsante «Mostra contatti e QR»
   finiva 18px prima del bordo della scheda. Una colonna sola, come sopra e sotto questa fascia. */
@media (min-width: 576px) and (max-width: 767px) {
  html[data-wrep-pagina="reporter"] .wrep-reporter-summary-head { grid-template-columns: minmax(0, 1fr); }
}
/* Assistenza: errori del form in elenco puntato con rientro sporgente (prima «- » e a capo sotto il trattino). */
html[data-wrep-pagina="assistenza"] #msg_error .wrep-support-errori { margin: 0; padding-left: 1.15em; list-style: disc; }
html[data-wrep-pagina="assistenza"] #msg_error .wrep-support-errori li + li { margin-top: 4px; }
html[data-wrep-pagina="assistenza"] #msg_error .wrep-support-errori li { text-wrap: pretty; }
/* Galleria: nelle schede della stessa riga la data stava subito sotto il titolo e quindi ad altezze diverse.
   Ora la scheda e' una colonna e la data va in fondo: allineata tra le colonne. */
#link .wrep-certified-link > .entry-item { display: flex; flex-direction: column; height: 100%; }
#link .wrep-certified-link .entry-wrap { display: flex; flex: 1 1 auto; flex-direction: column; }
#link .wrep-certified-link .entry { display: flex; flex: 1 1 auto; flex-direction: column; }
#link .wrep-certified-link .entry > time { margin-top: auto; }
@media (max-width: 575px) {
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_length select { padding: 0 28px 0 12px !important; background-position: right 8px center !important; }
}
/* Da 768 a 991px i comandi restano raggruppati a destra, come sul desktop (con pochi numeri non si sparpagliano). */
@media (min-width: 768px) and (max-width: 991px) {
  html[data-wrep-pagina="reporter"] #tabella-link_paginate { justify-content: flex-end; }
}

/* Profilo del reporter: categorie con etichetta visibile (prima solo icone
   con il nome nel tooltip, illeggibili da touch) e logo del partner sempre
   insieme al suo nome. */
html[data-wrep-pagina="reporter"] .wrep-reporter-categoria {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  white-space: nowrap;
}
html[data-wrep-pagina="reporter"] .wrep-reporter-categoria .fas {
  font-size: 15px;
  color: var(--wrep-accent, currentColor);
}
html[data-wrep-pagina="reporter"] .wrep-partner-blocco .wrep-partner-nome {
  overflow-wrap: anywhere;
  min-width: 0;
}
html[data-wrep-pagina="reporter"] .wrep-reporter-categorie {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  vertical-align: top;
}
html[data-wrep-pagina="reporter"] .wrep-reporter-categorie .wrep-reporter-categoria { margin-right: 0; }

/* ---------- Profilo: barra della tabella «Link certificati» da 768 a 991px (giro 4) ---------- */
/* La tendina «Visualizza» prendeva mezza riga (360-472px) e sembrava il campo principale; conteggio e
   paginazione andavano su due righe pur entrandoci in una. Qui la barra segue lo schema da 992px: tendina
   stretta con l'etichetta accanto, ricerca a destra, conteggio e paginazione sulla stessa riga. */
@media (min-width: 768px) and (max-width: 991px) {
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
  }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > * { flex: 1 0 100%; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper::before,
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper::after { display: none; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_length { flex: 0 0 auto; float: none; margin: 0; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_filter { flex: 1 1 260px; max-width: 360px; float: none; margin: 0 0 0 auto; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_length label,
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    white-space: nowrap;
  }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_length select { width: auto !important; min-height: 44px; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_filter input { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; margin: 0; }
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_info,
  html[data-wrep-pagina="reporter"] .wrep-reporter-profile .dataTables_wrapper > .dataTables_paginate { flex: 1 1 auto; float: none; margin: 0; }
}

/* Certificato: indirizzo da copiare a mano quando «Condividi» non puo' condividere ne' copiare (giro 4). */
html[data-wrep-pagina="certificazionelink"] .wrep-cert-indirizzo { margin-top: 16px; }
html[data-wrep-pagina="certificazionelink"] .wrep-cert-indirizzo[hidden] { display: none; }
html[data-wrep-pagina="certificazionelink"] .wrep-cert-indirizzo label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; }
html[data-wrep-pagina="certificazionelink"] .wrep-cert-indirizzo input {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  text-overflow: ellipsis;
}