/* Schermo largo — PC e tablet. Dal 921 px in su la pagina usa il disegno del PC (prima partiva da 1100 px e
   fra 921 e 1099 px restava il telefono dentro una cornice di 640 px). Fra 921 e 1099 px — iPad in orizzontale,
   portatili piccoli — la barra laterale diventa una colonna di icone con l'etichetta sotto, così la pagina ha
   lo spazio per le due colonne della scheda e per le griglie. */
@media (min-width:921px) and (max-width:1099px) {
  /* Anche senza «dnav-on»: la classe arriva un attimo dopo l'apertura e dopo una rotazione. */
  .dnav, .dnav.dnav-on { flex: 0 0 92px !important; width: 92px !important; padding: 20px 8px !important; }
  .dnav .db { font-size: 0 !important; justify-content: center; gap: 0 !important; padding: 4px 0 16px !important; }
  .dnav .di, .dnav .ml-di { flex-direction: column; justify-content: center; gap: 5px; padding: 10px 4px; font-size: .6875rem; line-height: 1.2; text-align: center; }
  .dnav .ml-di span { white-space: nowrap; }
  .dnav .ml-di .ml-bollo { left: calc(50% + 6px); right: auto; }
  .dnav .drole, .dnav .dhint { display: none !important; }
  /* Nella scheda la colonna della prenotazione si stringe un poco, per lasciare spazio a foto e dettagli. */
  #detail.screen { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; }
}
/* Il gestionale su tablet: la colonna da 520 px del telefono si allarga e, dal 760 px in su, «Oggi» e «Gestione»
   vanno su due colonne come sul PC (la regola delle due colonne è nel blocco della fase 179). */
@media (min-width:700px) and (max-width:1023px) {
  html.pc179.sn-on #gestisci .gn, html.pc179 #an166Prep .an6-col { max-width: 1160px; padding-left: 28px; padding-right: 28px; }
}
@media (min-width:760px) and (max-width:1023px) {
  html.pc179.sn-on #gnCorpo[data-vista="oggi"], html.pc179.sn-on #gnCorpo:is([data-vista="attivita"],[data-vista="attivita-incassi"],[data-vista="attivita-andamento"]) > .ga, html.pc179 #an166Prep .an6-col { column-gap: 28px; }
}
/* In una colonna da tablet le carte affiancate diventavano larghe 160 px: una per riga fino al PC. */
@media (min-width:760px) and (max-width:920px) {
  html.pc179.sn-on #gnCorpo .ga-carte { grid-template-columns: minmax(0, 1fr); }
}
/* I risultati della ricerca e l'elenco delle esperienze su tablet in verticale: due schede per riga invece di una
   scheda larga quanto lo schermo (e alta 670 px). */
@media (min-width:600px) and (max-width:920px) {
  /* Selettori con l’id: sotto i 900 px blocchi più vecchi impongono una colonna e i margini con la stessa forza. */
  #search #results, #s37exp.s13-grid, #s13Grid.s13-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 18px 16px !important; }
  #search #results > *, #s37exp.s13-grid > *, #s13Grid.s13-grid > * { margin: 0 !important; width: auto !important; }
}
/* Le foto in cima alla scheda su tablet in verticale: sul telefono sono quadrate, su un iPad diventavano alte
   tre quarti dello schermo. */
@media (min-width:600px) and (max-width:920px) {
  #dgallery.gallery, #ormeggio .gallery, #expdetail .s13-hero { height: min(62vw, 52vh); }
}
/* Gestionale da PC: la barra laterale è il menu del gestionale (gestionale-pc.js). In cima «Pubblica»; poi il
   lavoro di ogni giorno; poi le sezioni dell'attività; in fondo la Gestione con tutto il resto e il profilo.
   L'ordine è !important perché il passo 4 del gestionale ordina le stesse voci per la barra del telefono. */
@media (min-width:921px) {
  html.ml-on .dnav { overflow-y: auto; }
  html.ml-on .dnav .ml-dgruppo > .pcg-pubblica { order: 0 !important; }
  html.ml-on .dnav .ml-dgruppo > [data-ml="oggi"] { order: 1 !important; }
  html.ml-on .dnav .ml-dgruppo > [data-ml="calendario"] { order: 2 !important; }
  html.ml-on .dnav .ml-dgruppo > .pcg-prenotazioni { order: 3 !important; }
  html.ml-on .dnav .ml-dgruppo > [data-ml="messaggi"] { order: 4 !important; }
  html.ml-on .dnav .ml-dgruppo > .pcg-tit { order: 5 !important; }
  html.ml-on .dnav .ml-dgruppo > .pcg-barche { order: 6 !important; }
  html.ml-on .dnav .ml-dgruppo > .pcg-esperienze { order: 7 !important; }
  html.ml-on .dnav .ml-dgruppo > .pcg-posti { order: 8 !important; }
  html.ml-on .dnav .ml-dgruppo > .pcg-incassi { order: 9 !important; }
  html.ml-on .dnav .ml-dgruppo > .pcg-andamento { order: 10 !important; }
  html.ml-on .dnav .ml-dgruppo > .pcg-offerte { order: 11 !important; }
  html.ml-on .dnav .ml-dgruppo > .pcg-documenti { order: 12 !important; }
  html.ml-on .dnav .ml-dgruppo > [data-ml="attivita"] { order: 13 !important; margin-top: 10px; }
  html.ml-on .dnav .ml-dgruppo > [data-ml="profilo"] { order: 14 !important; }
  .dnav .pcg-di[hidden] { display: none !important; }
  .dnav .pcg-tit { margin: 16px 12px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6f8792; }
  .dnav .ml-di.pcg-pubblica { margin-bottom: 12px; justify-content: center; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #3a2c08; font-weight: 700; }
  .dnav .ml-di.pcg-pubblica:hover { color: #3a2c08; filter: brightness(1.06); }
  /* Quando è accesa una sezione, «Gestione» non resta accesa insieme a lei. */
  .dnav .ml-dgruppo.pcg-sotto > [data-ml="attivita"].on { background: none; color: #a9cfd3; }
  .dnav .ml-dgruppo.pcg-sotto > [data-ml="attivita"].on svg { color: inherit; }
  /* Nell'elenco del calendario la voce accesa è «Prenotazioni», non anche Calendario. */
  .dnav .ml-dgruppo.pcg-elenco > [data-ml="calendario"].on { background: none; color: #a9cfd3; }
  .dnav .ml-dgruppo.pcg-elenco > [data-ml="calendario"].on svg { color: inherit; }
}
@media (min-width:921px) and (max-width:1099px) {
  .dnav .pcg-tit { display: block; height: 1px; margin: 8px 14px; font-size: 0; background: rgba(255,255,255,.12); }
}
@media (min-width:921px) {
  /* «Dati letti · Aggiorna i dati» su una riga sola, in alto a destra, invece di due righe in testa alla pagina. */
  html.pc179.sn-on #gnCorpo > .gn-sez:first-child:has(> .gn-nota + .gn-link) { flex-direction: row; justify-content: flex-end; align-items: baseline; gap: 14px; margin-bottom: 4px; }
  html.pc179.sn-on #gnCorpo > .gn-sez:first-child:has(> .gn-nota + .gn-link) > * { margin: 0; width: auto; align-self: auto; }
  /* Calendario da PC: gli strumenti (Rientri, Da incassare, Barche libere…) in una griglia da quattro invece di otto
     tasti larghi quanto la pagina, uno sotto l'altro, prima del calendario. */
  html.pc179.sn-on #gnCorpo[data-vista="calendario"] { flex-direction: row; flex-wrap: wrap; column-gap: 12px; align-content: flex-start; }
  html.pc179.sn-on #gnCorpo[data-vista="calendario"] > * { flex: 0 0 100%; min-width: 0; }
  html.pc179.sn-on #gnCorpo[data-vista="calendario"] > section.gn-sez:has(> .gn-btn:only-child) { flex-basis: calc((100% - 36px) / 4); display: flex; }
  html.pc179.sn-on #gnCorpo[data-vista="calendario"] > section.gn-sez > .gn-btn:only-child { flex: 1; min-height: 64px; padding: 10px 14px; line-height: 1.3; }
}
/* Gestionale aperto da chi non è ancora in modalità lavoro (per esempio chi si è appena iscritto): sul PC la barra
   laterale mostra il gruppo del gestionale (gestionale-pc.js) al posto delle voci del cliente, e la barra del
   telefono in fondo allo schermo (#gnNav) non serve più. */
@media (min-width:921px) {
  #gnNav { display: none !important; }
  .dnav .pcg-gruppo { display: none; }
  html:not(.ml-on):has(#gestisci.screen.active) .dnav .pcg-gruppo { display: flex; flex-direction: column; gap: 4px; }
  html:not(.ml-on):has(#gestisci.screen.active) .dnav > .di,
  html:not(.ml-on):has(#gestisci.screen.active) .dnav > .drole { display: none !important; }
  /* Le stesse due regole con la classe che mette gestionale-pc.js, per i browser che non conoscono :has(). */
  html.pcg-in-gestione:not(.ml-on) .dnav .pcg-gruppo { display: flex; flex-direction: column; gap: 4px; }
  html.pcg-in-gestione:not(.ml-on) .dnav > .di,
  html.pcg-in-gestione:not(.ml-on) .dnav > .drole { display: none !important; }
  html:not(.ml-on) .dnav { overflow-y: auto; }
  .dnav .pcg-gruppo > .pcg-casa { margin-top: 10px; }
  .dnav .pcg-gruppo > .pcg-v-attivita { margin-top: 10px; }
  .dnav .pcg-gruppo .ml-di.on { background: rgba(255,255,255,.1); color: #fff; }
  .dnav .pcg-gruppo .ml-di.on svg { color: var(--gold-2); }
  /* L'ingresso di chi comincia a lavorare con Salpe (Come vuoi usare Salpe? · Cosa offri? · Come operi?): una
     colonna più larga, le scelte affiancate e il tasto subito sotto, invece che incollato al fondo dello schermo. */
  html.sn-on #snIngresso .sn-col { max-width: 880px; }
  html.sn-on #snIngresso .sn-testa .sn-col { padding-top: 24px; padding-bottom: 24px; }
  html.sn-on #snIngresso .sn-voci { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
  html.sn-on #snIngresso .sn-voci > .sn-opz { margin: 0; height: 100%; align-items: flex-start; }
  html.sn-on #snIngresso .sn-piede { margin-top: 28px; display: flex; flex-direction: row; justify-content: flex-end; }
  html.sn-on #snIngresso .sn-piede .sn-primario { width: auto; min-width: 280px; padding-left: 36px; padding-right: 36px; }
  /* «Come vuoi usare Salpe?»: le due strade affiancate. */
  html.sn-on #snIngresso .sn-a1-carte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  html.sn-on #snIngresso .sn-a1-carte > .sn-carta { margin: 0; height: 100%; }
  html.sn-on #snIngresso .sn-a1 .sn-col { justify-content: center; }
  html.sn-on #snIngresso .sn-a1-carte { margin-top: 40px; }
  html.sn-on #snIngresso .sn-a1-carte > .sn-carta { padding: 22px 24px; }
  html.sn-on #snIngresso .sn-a1-piede { margin-top: 36px; }
}
/* Il profilo da PC è una pagina di impostazioni: a sinistra la tua scheda (foto, nome, email) e il passaggio fra
   cliente e lavoro, a destra le sezioni una sotto l'altra, larghe. La pagina passa da 880 a 1160 px (la regola
   della fase 49 ha !important, per questo anche qui). Fra 921 e 1099 px resta una colonna sola. */
@media (min-width:1100px) {
  body .app .screen#cprofile { padding-left: max(24px, calc((100% - 1160px) / 2)) !important; padding-right: max(24px, calc((100% - 1160px) / 2)) !important;
    display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 32px; align-content: start; align-items: start; }
  #cprofile > .cp-hero { grid-column: 1; grid-row: 1; }
  #cprofile > .ml-carta { grid-column: 1; grid-row: 2; margin: 16px 0 0; }
  #cprofile > .cp-hero { margin: 0; border-radius: 20px; overflow: hidden; }
  #cprofile > #s38corpo { margin: 0; padding: 0 0 108px; }
  /* Gli altri riquadri del profilo (Lavora con Salpe, le porte dimostrative) vanno sotto, a sinistra. */
  #cprofile > :not(.cp-hero):not(.ml-carta):not(#s38corpo) { grid-column: 1; margin: 16px 0 0; }
  #cprofile > #s38corpo { grid-column: 2; grid-row: 1 / span 3; }
  #cprofile #s38corpo > .s38-fondo { display: flex; gap: 12px; }
  #cprofile #s38corpo > .s38-fondo > .cta { flex: 1; margin: 0; }
}
/* Pubblicare da PC (barca, esperienza, posto barca): nella pagina da 880 px i riquadri del passo vanno su due
   colonne, e quelli corti riempiono i buchi (dense). Restano a tutta larghezza il primo riquadro (il tipo, la città,
   chi guida), quelli con i file (foto, video, documenti), con un testo lungo, con molte scelte o molti campi, le note
   e i tasti Avanti/Indietro. Il prefisso html.sn-on.sn145 pareggia la regola della fase 145, che li mette in colonna. */
@media (min-width:1100px) {
  :is(#addlisting, #expwizard, #pontilewizard) .pstep.on,
  html.sn-on.sn145 :is(#addlisting, #expwizard, #pontilewizard) .pstep.on { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; grid-auto-flow: row dense; }
  :is(#addlisting, #expwizard, #pontilewizard) .pstep.on > * { margin-top: 0; margin-bottom: 0; min-width: 0; }
  :is(#addlisting, #expwizard, #pontilewizard) .pstep.on > :not(.field),
  :is(#addlisting, #expwizard, #pontilewizard) .pstep.on > .field:first-child,
  :is(#addlisting, #expwizard, #pontilewizard) .pstep.on > .field:has(input[type="file"]),
  :is(#addlisting, #expwizard, #pontilewizard) .pstep.on > .field:has(textarea),
  :is(#addlisting, #expwizard, #pontilewizard) .pstep.on > .field:has(input:nth-of-type(4)),
  :is(#addlisting, #expwizard, #pontilewizard) .pstep.on > .field:has(button:nth-of-type(4)) { grid-column: 1 / -1; }
}
/* Le pagine interne della Gestione da PC (Da sistemare, Barche, Conto, Orari, Persone, Notifiche…): come Incassi e
   Andamento (fase 179), larghe 1160 px e con le sezioni su due colonne; intestazione e avvisi a tutta larghezza.
   Solo dove ci sono almeno due sezioni: le pagine fatte di un elenco solo, come Documenti, restano in colonna. */
@media (min-width:1100px) {
  html.pc179.sn-on #gnCorpo[data-vista^="attivita-"]:has(> .ga > .gn-sez ~ .gn-sez) { max-width: 1160px; }
  html.pc179.sn-on #gnCorpo[data-vista^="attivita-"] > .ga:has(> .gn-sez ~ .gn-sez) { display: block; column-count: 2; column-gap: 40px; }
  html.pc179.sn-on #gnCorpo[data-vista^="attivita-"] > .ga:has(> .gn-sez ~ .gn-sez) > * { column-span: all; margin-bottom: 28px; }
  html.pc179.sn-on #gnCorpo[data-vista^="attivita-"] > .ga:has(> .gn-sez ~ .gn-sez) > .gn-sez { column-span: none; break-inside: avoid; margin-top: 0; margin-bottom: 28px; }
  html.pc179.sn-on #gnCorpo[data-vista^="attivita-"] > .ga:has(> .gn-sez ~ .gn-sez) > .gn-sez:has(> .gn-avviso) { column-span: all; }
}