/*
    Scheda larga (iPhone Duo aperto, Samsung Fold aperto, mini tablet). Area iPhone Duo, 03/11/2026.

    In alto, su una riga sola a tutta larghezza, l'azienda: logo, nome, indirizzo, bollino, QR, condividi e «Dati aziendali».
    Sotto, a sinistra, i blocchi della scheda larghi come su un telefono; a destra il «palco»: le finestre della scheda (orari,
    link, dati aziendali, staff, recapiti...) si aprono li', una alla volta, senza coprire la scheda e senza il velo scuro.
    Senza finestra aperta il palco accoglie: chi e' il profilo, cosa si puo' fare, le voci della scheda come scorciatoie.

    Vale solo con la classe ec-largo su <html> (inc/scheda-larga.php la mette subito, assets/js/scheda-larga.js la tiene
    aggiornata): schermo di almeno 800x600 e dispositivo touch, oppure ?largo=1 per l'anteprima dal computer. Sul telefono
    non cambia niente: nessuna regola qui vale senza la classe. Colori, forme (clip-path) e stili dei blocchi non si toccano.
*/

html.ec-largo {
    --ec-colonna: clamp(380px, 44vw, 460px);   /* i blocchi a sinistra: larghi come un telefono */
    --ec-bordo: 10px;                           /* lo stesso stacco dei blocchi della scheda */
    --ec-sopra: 160px;                          /* dove comincia il palco: lo scrive scheda-larga.js (fondo della riga dell'azienda + 10) */
    --ec-blu: #22a7e0;                          /* il blu di «Dati aziendali» (style-pro.css, .btn-blu) */
    --ec-grigio: #f4f4f4;                       /* il grigio delle finestre (modal.css, .grigio) */
    --ec-respiro: 8%;                           /* il respiro sopra e sotto delle icone (vedi «i blocchi a sinistra»): lo riscrive scheda-larga.js */
}

html.ec-largo .main {
    max-width: none;
    margin: 0;
    padding-top: 50px;
}

/* la testata resta su tutta la larghezza; il colore della beta (#header.header, inc/header.php) vince su questo bianco */
html.ec-largo .main > .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 7000;
    background-color: #fff;
}

/* ---- la riga dell'azienda ---- */

/* lo stesso spazio sopra e sotto (style-pro.css azzera il padding sotto con !important: qui serve lo stesso peso);
   la forma e' lo squircle dei blocchi (Betto, 03/11), l'ombra resta quella SVG di app.js */
html.ec-largo:not(.ec-persona) .element-company {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 15px;
    min-height: 0;
    padding: 10px 15px;
    padding-bottom: 10px !important;
    margin: 0 var(--ec-bordo);
    clip-path: var(--squircle-block);
}

/* con l'azienda collegata c'e' un div in piu' intorno (scheda-pro.php): i suoi figli stanno nella riga come gli altri */
html.ec-largo:not(.ec-persona) .element-company > #element-link-01:not(.element-link) {
    display: contents;
}

/* nome e indirizzo prendono quello che resta: sugli schermi stretti (800 px) si stringono e l'indirizzo va a capo,
   i pulsanti non scendono mai su una seconda riga */
html.ec-largo:not(.ec-persona) .element-company .element-company-inner {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    flex-wrap: nowrap;
    padding: 0;
}

/* il logo largo quanto la sua immagine (50 o 80 px a seconda dello schermo): niente sovrapposizione col nome */
html.ec-largo:not(.ec-persona) .element-company .element-company-logo {
    float: none;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0 15px 0 0;
}

html.ec-largo:not(.ec-persona) .element-company .element-company-name {
    float: none;
    flex: 1 1 auto;
    width: auto;
}

html.ec-largo:not(.ec-persona) .element-company .element-company-address {
    margin: 4px 0 0;
}

html.ec-largo:not(.ec-persona) .element-company .element-company-info {
    position: static;
    flex: 0 0 auto;
    width: 35px;
}

html.ec-largo:not(.ec-persona) .element-company .condividi-datiaziendali {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    gap: 10px;
}

html.ec-largo:not(.ec-persona) .element-company .condividi-datiaziendali .element-multiple-block {
    flex: 0 0 auto;
    margin: 0;
}

html.ec-largo:not(.ec-persona) .element-company .condividi-datiaziendali .sez-share-qrcode {
    width: 60px;
}

/* Condividi (c'e' solo sui dispositivi touch, lo mostra lo script del blocco): largo quanto serve, con lo stesso spazio ai lati
   del QR (15 px); il padding non si puo' usare, su alcuni profili il blocco lo scrive in linea con !important */
html.ec-largo:not(.ec-persona) .element-company .condividi-datiaziendali .sez-share {
    min-width: 115px;
}

html.ec-largo:not(.ec-persona) .element-company .condividi-datiaziendali .sez-datiaziendali {
    min-width: 220px;
}

/* sotto i 900 px (Fold, 800 px) «Dati aziendali» e' un po' piu' stretto, per lasciare posto al nome */
@media (max-width: 899px) {
    html.ec-largo:not(.ec-persona) .element-company .condividi-datiaziendali .sez-datiaziendali {
        min-width: 180px;
    }
}

/* ---- i blocchi a sinistra ---- */

/* la colonna e' alta quanto lo schermo (app.js); se i blocchi non ci stanno nemmeno senza respiro, scorre lei, mai la pagina */
html.ec-largo .wrapper-container {
    width: var(--ec-colonna);
    overflow-x: hidden;
    overflow-y: auto;
}

/* il respiro sopra e sotto delle icone (sede, recapiti, link): la scheda lo mette all'8% della larghezza, in linea, quando c'e'
   il pulsante dello staff (scheda-pro.php). Sui tablet bassi le righe non ci stavano piu' (Betto, 03/11): qui lo scrive
   scheda-larga.js (--ec-respiro) perche' le righe riempiano l'altezza che resta, 8% se c'e' posto, meno se manca.
   Vale solo sui blocchi che la scheda ha gia' imbottito: gli altri restano come sul telefono */
html.ec-largo .wrapper-container .sez-contact[style*="padding-top"],
html.ec-largo .wrapper-container .sez-where[style*="padding-top"],
html.ec-largo .wrapper-container .sez-i-link[style*="padding-top"] {
    padding-top: var(--ec-respiro) !important;
    padding-bottom: var(--ec-respiro) !important;
}

/* mentre scheda-larga.js misura l'altezza naturale delle righe: niente stiramento e niente transizione (i blocchi hanno
   transition: all 0.5s, e il padding misurato sarebbe quello a meta' strada) */
html.ec-largo.ec-misura .wrapper-container {
    align-items: flex-start;
}

html.ec-largo.ec-misura .wrapper-container .wrapper {
    align-content: flex-start;
}

html.ec-largo.ec-misura .wrapper-container .element-dynamic {
    transition: none !important;
}

/* «Salva il contatto» (Betto, 03/11 sera): la barra e il suo stile stanno in inc/salva-contatto.php, perche' la finestra della
   persona si apre anche in pagine senza questo foglio (liste, qui vicino) */

/* ---- profilo personale sugli schermi larghi (ec-persona, da inc/scheda-larga.php): un biglietto da visita aperto a due pagine
   (Betto, 03/11 sera). Sinistra «chi sono»: copertina, foto e pulsanti, nome, ruolo, Salva il contatto, frase e bio che scorre.
   Destra «come raggiungermi»: recapiti e link che scorrono, in fondo l'azienda e Dati aziendali. Le finestre (QR, Dati aziendali,
   Condividi) si aprono sulla pagina di destra con le regole del palco (--ec-sopra, --ec-colonna le scrive scheda-larga.js).
   La pagina arriva in ajax (get-azienda-dipendente-da-profilo.php) e il contenitore e' una griglia: i figli di
   .azienda-dipendente-il-resto diventano celle con display: contents ---- */
html.ec-largo.ec-persona,
html.ec-largo.ec-persona body {
    overflow: hidden;
}

html.ec-largo.ec-persona .main {
    max-width: none;
}

html.ec-largo.ec-persona #scheda-personale {
    max-width: none !important;
    display: grid;
    grid-template-columns: calc(50% - 5px) 1fr;
    grid-template-rows: 1fr;
    column-gap: 10px;
    height: var(--ec-persona-alto, calc(100vh - 50px));
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
}

/* la copertina: con la forma dei blocchi e la proporzione del telefono (2:1: 200 px su 393), tra 170 e 240 px, allineata in basso
   (le scritte nelle foto stanno quasi sempre in fondo); la foto la scavalca come sul telefono (.azienda-dipendente-foto,
   top: -80px in style-pro.css). Prima era una fascia di 150 px: tagliava l'immagine (Betto, dal tablet) */
/* la pagina di sinistra scorre TUTTA, copertina compresa (Betto, 03/11 notte: «quando il tablet e' in orizzontale la colonna
   sinistra deve scorrere tutta»): scheda-larga.js mette copertina, foto e pulsanti e il testo dentro .ec-pagina-sinistra */
html.ec-largo.ec-persona .ec-pagina-sinistra {
    grid-area: 1 / 1 / 2 / 2;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

html.ec-largo.ec-persona .sfondo-popup {
    height: auto !important;
    aspect-ratio: 2 / 1;   /* senza tetto: sui tablet larghi un tetto la schiacciava e tagliava l'immagine (Betto) */
    min-height: 170px;
    background-position: center bottom !important;
    clip-path: var(--squircle-block);
}

/* sul telefono il blocco di foto e pulsanti ha 100 px di margine sopra e il resto risale di 50 px (top: -50px): con la griglia
   quegli spostamenti non valgono piu' e restava un vuoto di 90 px tra i pulsanti e il nome. Qui il blocco e' alto quanto i
   pulsanti piu' 20 px sopra (i pulsanti stanno a 20 px dalla copertina come sul telefono; a 0 erano appiccicati, Betto: il
   padding lo vince la regola #scheda-personale .azienda-dipendente-top di style-pro.css, da qui l'id nel selettore) e il nome
   comincia 20 px sotto */
html.ec-largo.ec-persona #scheda-personale .azienda-dipendente-top {
    height: 80px;
    margin: 0 !important;
    padding: 20px 10px 0 !important;
    box-sizing: border-box;
}

html.ec-largo.ec-persona .azienda-dipendente-il-resto {
    display: contents;
}

/* la pagina di sinistra scorre dal nome in giu'; «Possiamo incontrarci presso», la card dell'azienda e «Dati aziendali» stanno in
   fondo al testo (scheda-larga.js li sposta dentro .azienda-dipendente-dati: Betto, 03/11 notte, «alla fine del testo», non
   fissi sotto la lista che la tagliavano) */
html.ec-largo.ec-persona .azienda-dipendente-dati {
    margin: 20px 0 0 !important;
    padding-bottom: 20px;
}

/* la pagina di destra: solo i recapiti e i link, che scorrono fino in fondo */
html.ec-largo.ec-persona .links-reapiti-msg {
    grid-area: 1 / 2 / 2 / 3;
    min-height: 0;
    overflow-y: auto;
    margin: 0 !important;
    padding: 0 10px 10px 0 !important;
    background-color: transparent;
}

html.ec-largo.ec-persona .azienda-dipendente-dati .azienda-dipendente-azienda {
    margin: 24px 0 0 !important;
}

html.ec-largo.ec-persona .azienda-dipendente-dati .azienda-dipendente-azienda h3 {
    margin: 0 0 10px !important;
    font-size: 18px !important;
}

html.ec-largo.ec-persona .azienda-dipendente-dati .element-company {
    margin: 0 !important;
}

/* la mini card dell'azienda: il nome e l'indirizzo prendono tutta la larghezza che resta accanto al logo (sul telefono la colonna
   e' calc(100% - 120px) con spazio a destra: qui la citta' andava a capo con lo spazio libero, Betto) */
html.ec-largo.ec-persona .azienda-dipendente-dati .element-company-near .element-company-name {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 10px;
}

html.ec-largo.ec-persona .azienda-dipendente-dati .element-company-near .element-company-address,
html.ec-largo.ec-persona .azienda-dipendente-dati .element-company-near .element-company-tipologia {
    width: auto;
    padding-right: 0;
}

/* «Dati aziendali» come sul telefono: 50 px, non il blocco massiccio che veniva dal padding in percentuale sulla colonna larga;
   icona piu' piccola e un po' d'aria (Betto: «rimpicciolire l'icona e dare un po' di padding») */
html.ec-largo.ec-persona .azienda-dipendente-dati #sez-datiaziendali-popup {
    height: 50px !important;
    margin: 10px 0 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

html.ec-largo.ec-persona .azienda-dipendente-dati #sez-datiaziendali-popup img {
    width: 26px;
    height: 26px;
    margin: 0;
}

html.ec-largo.ec-persona .azienda-dipendente-dati #sez-datiaziendali-popup .element-title {
    padding: 0;
    margin: 0;
    line-height: 26px;
}

/* niente accoglienza: la pagina di destra ha i recapiti; l'ombra del palco solo con una finestra aperta */
html.ec-largo.ec-persona #ec-palco-vuoto {
    display: none !important;
}

html.ec-largo.ec-persona #ec-palco-ombra {
    display: none;
}

html.ec-largo.ec-persona.ec-palco-aperto #ec-palco-ombra {
    display: block;
}

/* le finestre (QR, Dati aziendali, Condividi) si aprono sulla pagina di SINISTRA, dove stanno i pulsanti che le aprono, e i
   recapiti a destra restano visibili (Betto, 03/11 notte: sulla pagina di destra la posizione «e' brutta»). La pagina di sinistra
   finisce a --ec-persona-destra dal bordo destro (lo scrive aggiornaPersona) */
html.ec-largo.ec-persona body > .modal,
html.ec-largo.ec-persona #ec-palco-ombra {
    left: var(--ec-bordo) !important;
    right: var(--ec-persona-destra, 50%) !important;
}

/* la finestra del QR code (profilo personale e scheda aziendale) sta al centro dello schermo, col velo intorno, larga come la
   colonna dei blocchi e alta quanto le serve (Betto, 04/11: «la modale del QR code centrala», «dagli un'altezza massima, quello che
   serve»). La classe ec-qr e l'altezza --ec-qr-alto (testata + contenuto, al massimo lo spazio tra --ec-sopra e il bordo) le scrive
   scheda-larga.js (aggiornaQr) quando la finestra contiene il QR (.before-qrcode di get-qrcode*.php). Specificita' piu' alta delle
   regole del palco e, per ordine, di quelle del profilo personale */
html.ec-largo.ec-qr body > .modal,
html.ec-largo.ec-qr #ec-palco-ombra {
    left: calc(50% - var(--ec-colonna) / 2) !important;
    right: calc(50% - var(--ec-colonna) / 2) !important;
    top: calc(50% - var(--ec-qr-alto, 60vh) / 2) !important;
    bottom: auto !important;
    height: var(--ec-qr-alto, 60vh) !important;
}

/* ---- i profili social nella finestra «I nostri link» sul palco: pulsanti piccoli, due per riga, icona e nome, senza la freccia
   (Betto, 03/11 notte: «prova a mettere i pulsanti dei social piu' piccoli uno di fianco all'altro»; 04/11: due per riga, con tre i nomi
   lunghi si troncavano). Sul telefono non cambia ---- */
html.ec-largo body > .modal .modal-content .links-da-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

html.ec-largo body > .modal .modal-content .links-da-social .titoletto-azienda {
    flex: 0 0 100%;
    width: 100%;
}

html.ec-largo body > .modal .modal-content .links-da-social .link-da-social {
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px);
    margin: 0 !important;
}

html.ec-largo body > .modal .modal-content .link-da-social a {
    display: flex;
    align-items: center;
    min-height: 0;
}

html.ec-largo body > .modal .modal-content .link-da-social .link-da-social-inner-sx {
    float: none;
    flex: 0 0 auto;
    width: 52px;
    max-width: 52px;
    height: 52px;
}

html.ec-largo body > .modal .modal-content .link-da-social .img {
    width: 30px;
    max-width: 30px;
}

html.ec-largo body > .modal .modal-content .link-da-social .link-da-social-inner-dx {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    min-height: 0;
    padding: 0 8px;
}

html.ec-largo body > .modal .modal-content .link-da-social .text h3 {
    font-size: 15px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.ec-largo body > .modal .modal-content .link-da-social .text p,
html.ec-largo body > .modal .modal-content .link-da-social .img-text {
    display: none;
}

/* ---- i social della persona (profilo personale a due pagine e finestra della persona sul palco): due per riga, piccoli, icona
   e nome, senza freccia ne' descrizione, come nella finestra «I nostri link» (Betto, 04/11: «lo vedo come prima, ma lo hai fatto
   sul profilo personale del duo???»). La classe ec-social la mette get-azienda-dipendente*.php dal dominio del link; la lista
   diventa flex solo se ne ha (:has): gli altri link e i recapiti restano a tutta larghezza, col solito stacco di 10 px (gap al
   posto del margine). Senza :has (browser vecchi) non cambia niente. Sul telefono non cambia niente ---- */
html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) > .link-da-link,
html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) > .link-reapiti-msg,
html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) > .titoletto-azienda {
    flex: 0 0 100%;
    width: 100%;
    margin: 0 !important;
}

html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) > .link-da-link.ec-social {
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px);
}

html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) .link-da-link.ec-social a {
    align-items: center;
    min-height: 0;
}

html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) .link-da-link.ec-social .link-da-link-inner-sx {
    float: none;
    flex: 0 0 auto;
    width: 52px;
    min-width: 52px;
    height: 52px;
}

html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) .link-da-link.ec-social img {
    width: 30px;
    max-width: 30px;
}

html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) .link-da-link.ec-social .link-da-link-inner-dx {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) .link-da-link.ec-social .text {
    width: 100%;
    min-width: 0;
    padding: 0 8px;
}

html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) .link-da-link.ec-social .text h3 {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) .link-da-link.ec-social .text p,
html.ec-largo .links-reapiti-msg:has(.link-da-link.ec-social) .link-da-link.ec-social .img-text {
    display: none;
}

/* ---- telefono girato (orizzontale, touch, sotto le misure del palco): la pagina scorre (Betto, 03/11 sera) ----
   Prima: avviso «metti in verticale» (app.js) e, sotto i 768 px, pagina ruotata di -90° (style-pro.css); app.js blocca lo
   scorrimento di html e da' al contenitore dei blocchi l'altezza dello schermo. Qui niente avviso, niente rotazione, html scorre
   e il contenitore e' alto quanto i blocchi. La classe la mette lo script in testa di inc/scheda-larga.php e la tiene
   aggiornata scheda-larga.js. In verticale non cambia niente. */
html.ec-girato {
    overflow-y: auto !important;
    transform: none !important;
    position: static !important;
    width: auto !important;
    top: auto !important;
}

html.ec-girato .wrapper-container {
    height: auto !important;
}

/* il suggerimento «gira il telefono» (Betto, 03/11 sera: «qualcosa di poco invadente, in basso a destra»): una pastiglia fissa
   in basso a destra, solo col telefono girato; sta sotto le finestre (z-index); toccata sparisce per la sessione (ec-gira-visto) */
#ec-gira {
    display: none;
}

html.ec-girato:not(.ec-gira-visto) #ec-gira {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 60000;
    padding: 8px 14px 8px 10px;
    border-radius: 30px;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(165, 178, 186, 0.55);
    color: #333;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#ec-gira svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--ec-blu);
}

/* con una finestra aperta (ec-finestra, da scheda-larga.js) la pagina sotto resta ferma dov'era: body fisso, spostato in su di
   quanto era scorsa (--ec-y). Cosi' lo scorrimento a zero e il ripristino che app.js fa aprendo e chiudendo (lockBody,
   unlockBody, popupShowPartial) non muovono niente; alla chiusura scheda-larga.js rimette lo scorrimento a --ec-y (Betto,
   03/11 sera: «quando chiudo devo avere il profilo nella posizione in cui lo avevo lasciato») */
html.ec-girato.ec-finestra body {
    position: fixed;
    top: calc(-1 * var(--ec-y, 0px));
    left: 0;
    right: 0;
    width: 100%;
}

/* app.js (lockBody) mette in linea al body height 100% e overflow hidden: il body diventava uno scorrevole a se', Chrome ci
   spostava dentro lo scorrimento della pagina (ancoraggio) e lo spostamento raddoppiava (-600 invece di -300, misurato).
   Il body non deve mai scorrere da solo: scorre html */
html.ec-girato body {
    overflow: visible !important;
    height: auto !important;
}

/* ---- il palco ---- */

/* la card del palco (accoglienza o finestra): bianca, con lo squircle dei blocchi (clip-path, non border-radius: Betto, 03/11) */
html.ec-largo body > .modal,
html.ec-largo #ec-palco-vuoto {
    position: fixed;
    top: var(--ec-sopra);
    bottom: var(--ec-bordo);
    left: var(--ec-colonna);
    right: var(--ec-bordo);
    background-color: #fff;
    clip-path: var(--squircle-block);
}

/* l'ombra sta in un elemento a parte sotto la card, perche' il clip-path taglierebbe la sua (come l'SVG di app.js per i blocchi) */
#ec-palco-ombra {
    display: none;
}

html.ec-largo #ec-palco-ombra {
    display: block;
    position: fixed;
    top: var(--ec-sopra);
    bottom: var(--ec-bordo);
    left: var(--ec-colonna);
    right: var(--ec-bordo);
    z-index: 5;
    border-radius: 30px;
    box-shadow: 4px 4px 8px rgba(165, 178, 186, 0.2);
    pointer-events: none;
}

/* la finestra aperta da app.js (get-modal.php, get-modal-partial.php) sta sul palco; le misure che app.js scrive per il telefono qui non valgono */
html.ec-largo body > .modal {
    top: var(--ec-sopra) !important;
    bottom: var(--ec-bordo) !important;
    left: var(--ec-colonna) !important;
    right: var(--ec-bordo) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    background-color: #fff !important;
    overflow: hidden;
    animation: ec-palco-entra 0.26s ease-out;
}

@keyframes ec-palco-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html.ec-largo body > .modal { animation: none; }
}

/* dentro, colori invertiti rispetto al telefono (Betto, 03/11): fondo bianco, pastiglia del titolo grigia; i blocchi del
   contenuto restano come sono; contenuti e icone a 10 px dal bordo */
html.ec-largo body > .modal .modal-header {
    flex: 0 0 auto;
    opacity: 1 !important;
    margin: 2px 0 0 !important;   /* era 10 px: Betto (03/11 sera) vuole vedere la testata piu' vicina al bordo */
    background-color: transparent !important;
}

html.ec-largo body > .modal .modal-header .title {
    background-color: var(--ec-grigio) !important;
}

html.ec-largo body > .modal .modal-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto;
    background-color: transparent !important;
}

html.ec-largo body > .modal .modal-content:not(.no-padding) {
    padding: 10px 10px 30px !important;
}

/* i contenitori delle liste (link, social, Scrivi, staff) hanno il fondo grigio #f4f4f4 in style-pro.css, pensato per il contenuto
   grigio del telefono: sul fondo bianco del palco quel grigio spuntava nei 10 px tra una card e l'altra e pareva un'ombra col
   bordo netto (Betto, 03/11 sera: «le ombre dei blocchi dentro il panel»). Qui il contenitore e' trasparente e resta solo l'ombra
   vera delle card, che sfuma nel bianco prima della card dopo. Sul telefono non cambia niente */
html.ec-largo body > .modal .modal-content .links-da-link,
html.ec-largo body > .modal .modal-content .links-da-social,
html.ec-largo body > .modal .modal-content .links-reapiti-msg,
html.ec-largo body > .modal .modal-content .links-dipendenti,
html.ec-largo body > .modal .modal-content .solo-appuntamento {   /* orari «Solo su appuntamento» (calendar.css): riempiva la finestra di grigio (Betto, lauracapecci) */
    background-color: transparent;
}

/* sul bianco l'ombra deve disegnare tutto il contorno della card, un po' piu' sotto che sopra (Betto, 03/11 sera): sul telefono
   e' spostata in basso a destra (4px 4px 4px) perche' il contorno lo da' il grigio del contenuto; qui e' una corona sfumata su
   tutti i lati, spostata di 1 px in basso, che finisce prima del bordo del contenuto (padding 10 px, che la taglierebbe).
   app.js legge questa box-shadow e la disegna con l'SVG gemello, come sul telefono */
html.ec-largo body > .modal .modal-content .link-da-link,
html.ec-largo body > .modal .modal-content .link-da-social,
html.ec-largo body > .modal .modal-content .link-reapiti-msg,
html.ec-largo body > .modal .modal-content .link-dipendenti,
html.ec-largo body > .modal .modal-content .btn-link-tel-mail,
html.ec-largo body > .modal .modal-content .btn-azienda-info,
html.ec-largo body > .modal .modal-content .btn-azienda-sedi {
    box-shadow: 0 1px 6px rgba(165, 178, 186, 0.55);
}

/* l'<a> dentro la card ha un'ombra sua (4px 4px 8px, style-pro.css): col clip-path della card non si vede mai, senza clip-path
   (browser senza shape(), squircle-ripiego.css) esce come un rettangolo in basso a destra, tagliato dal bordo del contenuto */
html.ec-largo body > .modal .modal-content .link-da-link a,
html.ec-largo body > .modal .modal-content .link-da-social a,
html.ec-largo body > .modal .modal-content .link-reapiti-msg a,
html.ec-largo body > .modal .modal-content .link-dipendenti a {
    box-shadow: none;
}

/* l'ombra deve seguire la forma della card (Betto): app.js disegna il path dell'SVG col raggio della manopola --r-* per 2.4
   (SHADOW_R_SCALE: angoli piu' tondi della card, «morbido al centro dei lati», fatto per l'ombra spostata del telefono); con la
   corona l'ombra mancava agli angoli. Qui la manopola vale il raggio della card diviso 2.4: l'SVG ha gli angoli della card.
   La forma della card non cambia (il suo clip-path e' --squircle-*, risolto su :root); solo dove c'e' shape(), perche' senza
   (squircle-ripiego.css) la manopola fa il border-radius */
@supports (clip-path: shape(from 0 0, line to 100% 100%)) {
    html.ec-largo body > .modal .modal-content .link-da-link { --r-link-da-link-tl: 8.333px; }
    html.ec-largo body > .modal .modal-content .link-da-social { --r-link-da-social-tl: 6.25px; }
    html.ec-largo body > .modal .modal-content .link-reapiti-msg { --r-reapiti-tl: 8.333px; }
    html.ec-largo body > .modal .modal-content .link-dipendenti { --r-link-dipendenti-tl: 8.333px; }
    html.ec-largo body > .modal .modal-content .btn-link-tel-mail { --r-btn-tel-mail: 5px; }
    html.ec-largo body > .modal .modal-content .btn-azienda-info { --r-btn-azienda-info: 5px; }
    html.ec-largo body > .modal .modal-content .btn-azienda-sedi { --r-btn-azienda-sedi: 5px; }
}

/* ---- il blocco aperto sul palco: pallino blu e titolo blu ---- */

html.ec-largo .element-link.ec-aperto {
    position: relative;
}

html.ec-largo .element-link.ec-aperto::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--ec-blu);
}

html.ec-largo .element-link.ec-aperto .element-title {
    color: var(--ec-blu);
}

/* il pallino sta sempre in alto a destra, anche sui pulsanti bassi (Lo staff, QR): Betto, 03/11 sera (prima a meta' altezza);
   su quello blu e' bianco */
html.ec-largo .element-link.element-btn.btn-blu.ec-aperto::after {
    background-color: #fff;
}

html.ec-largo .element-link.element-btn.btn-blu.ec-aperto .element-title {
    color: #fff;
}

/* ---- il palco senza finestra: l'accoglienza ---- */

#ec-palco-vuoto {
    display: none;
}

/* il contenuto (.ec-centro) sta al centro con i margini automatici, non con justify-content: cosi' quando e' piu' alto del
   palco (tablet bassi) parte dall'alto e si scorre, invece di sparire sopra; la data sta in fondo */
html.ec-largo #ec-palco-vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 30px 14px;
    overflow-y: auto;
    z-index: 6;
    color: #333;
    text-align: center;
}

html.ec-largo.ec-palco-aperto #ec-palco-vuoto {
    display: none;
}

#ec-palco-vuoto .ec-centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: auto 0;
}

#ec-palco-vuoto .ec-logo img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    clip-path: var(--squircle-logo-shape);
}

#ec-palco-vuoto h2 {
    margin: 4px 0 0;
    font-size: 22px;
    line-height: 30px;
    font-weight: 400;
}

#ec-palco-vuoto h2 strong {
    font-weight: 700;
}

/* il logo eccoci.online in linea col titolo (le immagini della scheda sono a blocco: qui no) */
#ec-palco-vuoto h2 .ec-marchio {
    display: inline-block;
    height: 19px;   /* era 24: Betto, 03/11 sera */
    width: auto;
    vertical-align: -4px;
    margin: 0 2px;
}

#ec-palco-vuoto p {
    margin: 0;
    max-width: 480px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 300;
    color: #555;
}

/* il piano, solo PRO e PRO MAX: la stella o la corona del bollino e il nome */
#ec-palco-vuoto .ec-piano {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px 4px 10px;
    border-radius: 30px;
    background-color: var(--ec-grigio);
    color: #333;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

#ec-palco-vuoto .ec-piano svg {
    flex: 0 0 auto;
}

/* per i Basic con gli orari (la mostra scheda-larga.js) */
#ec-palco-vuoto .ec-nota-orari {
    display: none;
    font-size: 13px;
    line-height: 19px;
    color: #888;
}

#ec-palco-vuoto.ec-con-orari .ec-nota-orari {
    display: block;
}

/* in fondo, la data dell'ultimo aggiornamento del profilo */
#ec-palco-vuoto .ec-aggiornato {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 16px;
    color: #999;
}

/* le voci della scheda come scorciatoie (le costruisce scheda-larga.js dai blocchi presenti) */
#ec-palco-vuoto .ec-voci {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    max-width: 560px;
}

#ec-palco-vuoto .ec-voci:empty {
    display: none;
}

#ec-palco-vuoto .ec-voci button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 9px;
    border: 0;
    border-radius: 30px;
    background-color: #fff;
    color: #333;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: 4px 4px 8px rgba(165, 178, 186, 0.2);
    cursor: pointer;
    transition: transform 0.18s ease-out;
}

#ec-palco-vuoto .ec-voci button:hover,
#ec-palco-vuoto .ec-voci button:focus-visible {
    transform: translateY(-2px);
}

#ec-palco-vuoto .ec-voci button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* sui palchi bassi (tablet da 600 px di altezza) l'accoglienza si stringe: logo piu' piccolo, spazi piu' corti.
   Sta dopo le regole base dell'accoglienza: a parita' di specificita' vince l'ultima */
@media (max-height: 650px) {
    html.ec-largo #ec-palco-vuoto {
        gap: 10px;
        padding: 20px 24px 12px;
    }

    #ec-palco-vuoto .ec-centro {
        gap: 10px;
    }

    #ec-palco-vuoto .ec-logo img {
        width: 56px;
        height: 56px;
    }

    #ec-palco-vuoto h2 {
        margin: 0;
        font-size: 20px;
        line-height: 26px;
    }

    #ec-palco-vuoto .ec-voci {
        margin-top: 2px;
    }
}

/* ---- la ricerca (lente della testata: inc/pannello-ricerca.php, assets/css/ricerca.css, agente principale) ----
   Sul telefono il pannello sta in fondo, sotto la finestra (z 900 contro 72999): non sono mai aperti insieme, la finestra ha
   il velo che blocca tutto. Sul palco la finestra e' aperta senza velo e la lente apriva la ricerca sotto la finestra, larga
   come la colonna e attaccata a sinistra; e con la tastiera alzata su un tablet in orizzontale resta una fascia bassa e
   larga, e i suggerimenti impilati sopra il campo uscivano dall'alto (Betto, 03/11, dal tablet).
   Qui la ricerca sta sopra tutto (anche sopra la testata fissa) e IN ALTO nella parte visibile dello schermo: il campo in
   cima, sotto i suggerimenti su due colonne (le attivita' a sinistra, i tag a destra) che scorrono dentro la fascia visibile;
   il riquadro e' largo fino a 880 px. La fascia visibile la scrive scheda-larga.js dal visualViewport (--ec-vv-sopra,
   --ec-vv-alto): con la tastiera lo script della ricerca sposta la vista in fondo, e il riquadro la segue. Le regole dello
   script della ricerca per la tastiera (tastiera-aperta, android-mode, ios-mode: fondo e trasformazioni) qui non valgono. */
html.ec-largo {
    --ec-vv-sopra: 0px;
    --ec-vv-alto: 100vh;
}

html.ec-largo .eccoci-srch-overlay {
    z-index: 74000;
}

html.ec-largo .eccoci-srch-panel,
html.ec-largo .eccoci-srch-panel.tastiera-aperta.ios-mode,
html.ec-largo .eccoci-srch-panel.tastiera-aperta.android-mode {
    position: fixed !important;
    z-index: 74010;
    top: calc(var(--ec-vv-sopra) + 12px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: min(880px, 100vw - 24px) !important;
    max-width: none;
    max-height: calc(var(--ec-vv-alto) - 24px);
    justify-content: flex-start;
    transform: translateX(-50%) translateY(-16px) !important;
    transform-origin: top center !important;
}

html.ec-largo .eccoci-srch-panel.eccoci-srch-active,
html.ec-largo .eccoci-srch-panel.eccoci-srch-active.tastiera-aperta.ios-mode,
html.ec-largo .eccoci-srch-panel.eccoci-srch-active.tastiera-aperta.android-mode {
    transform: translateX(-50%) translateY(0) !important;
}

/* il «dove» (pillola, «Ok, dove vuoi che cerchiamo?», Vicino a me / In un comune) resta in fondo, come un foglio dal basso
   (Betto, 03/11): la tastiera li' e' chiusa e non c'e' niente da tagliare */
html.ec-largo .eccoci-srch-panel.srch-dove {
    top: auto !important;
    bottom: 12px !important;
}

html.ec-largo .eccoci-srch-panel-inner {
    min-height: 0;
}

/* il campo in cima, poi i suggerimenti; il resto (pillola, «dove», pulsanti) nell'ordine di sempre */
html.ec-largo .eccoci-srch-input-bar {
    order: -2;
    flex: 0 0 auto;
}

html.ec-largo .eccoci-srch-autocomplete-suggestions {
    order: -1;
}

/* due colonne: il riquadro delle attivita' a sinistra, i tag scorrono a destra e poi sotto; scorre dentro la fascia visibile.
   L'altezza la da' la fascia (flex), non la max-height che scrive ricSuggerimentiSpazio (pannello-ricerca-js.php, pensata
   per il pannello in fondo); e il riquadro delle attivita' non scorre da solo dentro il riquadro che scorre */
html.ec-largo .eccoci-srch-autocomplete-suggestions.eccoci-srch-active {
    display: block;
    flex: 0 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    padding: 2px 4px 4px;
}

html.ec-largo .eccoci-srch-autocomplete-suggestions .eccoci-srch-insegne {
    float: left;
    width: calc(50% - 8px);
    margin: 0 12px 8px 0;
    max-height: none !important;
    overflow-y: visible !important;
}

html.ec-largo .eccoci-srch-autocomplete-chip {
    display: inline-flex;
    vertical-align: top;
    margin: 0 8px 8px 0;
}

/* la finestra delle citta': anche lei in alto nella fascia visibile, col campo sopra l'elenco (che scorre) */
html.ec-largo .eccoci-srch-city-modal {
    z-index: 74020;
    align-items: flex-start;
    max-width: 880px;
    padding: calc(var(--ec-vv-sopra) + 12px) 12px 12px;
}

html.ec-largo .eccoci-srch-city-modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--ec-vv-alto) - 24px);
    overflow: hidden;
}

html.ec-largo .eccoci-srch-city-modal-header {
    flex: 0 0 auto;
}

html.ec-largo .eccoci-srch-city-search-box {
    order: 1;
    flex: 0 0 auto;
    margin: 0 0 12px;
}

html.ec-largo .eccoci-srch-cities-list {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

html.ec-largo .preloader-container {
    z-index: 74030;
}

/* il velo finto che scheda-larga.js mette al posto di quello di app.js: non si vede e non blocca niente */
html.ec-largo #overlay.ec-finto {
    display: none !important;
}

/* con una finestra aperta sul palco (scheda aziendale) o sulla pagina di sinistra (profilo personale) il velo finto si vede,
   scuro come quello del telefono (opacita' 0.3, app.js) e sotto la finestra: il resto si abbassa e toccandolo la finestra si
   chiude (Betto, 03/11 notte: prima sul personale, poi «uguale anche nel profilo aziendale») */
html.ec-largo.ec-palco-aperto #overlay.ec-finto {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 72000;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 1;   /* #overlay di style-pro.css nasce a opacita' 0 (app.js lo anima): qui si vede subito */
    animation: ec-velo-entra 0.26s ease-out;
}

@keyframes ec-velo-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* l'ombra del palco sotto la finestra sta sopra il velo */
html.ec-largo.ec-palco-aperto #ec-palco-ombra {
    z-index: 72001;
}

/* l'avviso «metti in verticale» non vale sullo schermo largo (ci pensa anche app.js) */
html.ec-largo #overlaylandscape {
    display: none !important;
}