/* ===================================================================== NEXFIBER - FOGLIO DEL TELEFONO E DEL TABLET Riscritto da zero il 28/10/2026. REGOLA DI QUESTO FILE: ogni riga sta dentro uno dei due @media. Fuori dai due blocchi non c'e' nulla, mai: il desktop (app.css) non puo' essere toccato da questo foglio. Soglie ammesse, uniche: 900px = telefono verticale e orizzontale, tablet verticale 1200px = tablet orizzontale e schermi piccoli Nessuna regola per singola pagina. Si lavora solo sul vocabolario comune: sezione, carta, griglia, campo, tabella, filtri, azioni, testata-pagina, fisa, linguette, pagine, popup. Se una pagina esce storta si corregge la regola generica, NON si aggiunge un blocco per quella pagina. ===================================================================== */ /* ===================================================================== TABLET ORIZZONTALE E SCHERMI PICCOLI (1200px) Si riduce il numero di colonne, niente altro. ===================================================================== */ @media (max-width: 1200px) { .griglia, .griglia-4, .griglia-importi, .dati-gruppo, .wic-griglia, .wz-corpo, .record-fatti, .anagrafica, .dati-record, .ct-pannello, .gr-area { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cruscotto { grid-template-columns: 1fr; } .campo.largo-2 { grid-column: 1 / -1; } .indice { position: static; flex-direction: row; overflow-x: auto; gap: .25rem; } .indice a { white-space: nowrap; } } /* ===================================================================== TELEFONO E TABLET VERTICALE (900px) ===================================================================== */ @media (max-width: 900px) { /* ---- 1. IMPIANTO ------------------------------------------------- Una colonna sola, menu che entra da sinistra, niente scorrimento laterale in nessun punto, contenuto largo quanto lo schermo. */ html, body { max-width: 100%; overflow-x: hidden; } body { font-size: 15px; } .app { grid-template-columns: 1fr; } .lato { position: fixed; left: 0; top: 0; width: 260px; height: 100vh; transform: translateX(-105%); transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .35); z-index: 1200; } .lato-aperto .lato { transform: none; } :root.lato-stretto { --lato: 240px; } .lato-stretto .lato-titolo, .lato-stretto .lato-gruppo a span { display: initial; } .lato-stretto .utente-testo { display: flex; } .lato-stretto .lato .marchio { font-size: 1.08rem; gap: .55rem; } .lato-stretto .lato-testa, .lato-stretto .lato-piede, .lato-stretto .lato-comandi { flex-direction: row; } .cima { padding: 0 .75rem; gap: .6rem; } .cima-azioni span, .cima-azioni .utente-testo { display: none; } .cima-azioni .primario { padding: .5rem .6rem; } .principale, .contenuto, #contenuto { max-width: 100%; overflow-x: hidden; } .contenuto { padding: .9rem 0 4rem; } /* niente rientri laterali */ .solo-telefono { display: inline-flex !important; } .solo-desktop { display: none !important; } /* ---- 2. TESTO ---------------------------------------------------- Niente parole spezzate lettera per lettera: si annullano i tagli automatici ovunque e si lascia andare a capo solo i valori lunghi. */ #contenuto *, #contenuto *::before, #contenuto *::after { hyphens: manual !important; -webkit-hyphens: manual !important; word-break: normal !important; } #contenuto td, #contenuto dd, #contenuto p, #contenuto a, #contenuto .solo-testo-mobile { overflow-wrap: break-word; } #contenuto h1 { font-size: 1.25rem; } #contenuto h2 { font-size: 1.05rem; } #contenuto h3 { font-size: .98rem; } /* ---- 3. TESTATE E BRICIOLE --------------------------------------- */ #contenuto .imp-briciole, #contenuto .briciole, .principale > .briciole-guscio { padding: .5rem .85rem 0; margin: 0 0 .35rem; font-size: .8rem; flex-wrap: wrap; } #contenuto .testata-pagina, #contenuto .imp-testata { display: block; padding: .6rem .85rem 0; margin: 0 0 .8rem; } #contenuto .testata-pagina h1, #contenuto .imp-testata h1 { font-size: 1.25rem; margin: 0 0 .2rem; } #contenuto .riepilogo-righe, #contenuto .sottotitolo, #contenuto .imp-testata p { font-size: .85rem; margin: 0 0 .5rem; } #contenuto .sezione-testa { display: block; } /* ---- 4. BOTTONI -------------------------------------------------- Tutti della stessa misura, due per riga. Numero dispari: l'ultimo prende la riga intera. */ #contenuto .testata-pagina .azioni, #contenuto .imp-azioni, #contenuto .sezione-testa .azioni, #contenuto .barra-azioni, #contenuto .piede-carta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; margin: .6rem 0 0; float: none; } #contenuto .testata-pagina .azioni > *, #contenuto .imp-azioni > *, #contenuto .sezione-testa .azioni > *, #contenuto .barra-azioni > *, #contenuto .piede-carta > * { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; box-sizing: border-box; height: 2.6rem; padding: 0 .6rem; margin: 0; font-size: .9rem; text-align: center; white-space: nowrap; } #contenuto .testata-pagina .azioni > *:last-child:nth-child(odd), #contenuto .imp-azioni > *:last-child:nth-child(odd), #contenuto .sezione-testa .azioni > *:last-child:nth-child(odd), #contenuto .barra-azioni > *:last-child:nth-child(odd), #contenuto .piede-carta > *:last-child:nth-child(odd) { grid-column: 1 / -1; } /* importare ed esportare sono cose da computer */ #contenuto .solo-desktop-import { display: none !important; } /* ---- 5. FILTRI --------------------------------------------------- Stessa identica griglia dei bottoni. Ricerca e pastiglie prendono la riga intera. Nessun interruttore. */ #contenuto .filtri, #contenuto .barra-filtri, #contenuto .filtri-riga { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0 .85rem; margin: 0 0 .8rem; } #contenuto .filtri > *, #contenuto .barra-filtri > *, #contenuto .filtri-riga > * { width: 100%; min-width: 0; max-width: 100%; margin: 0; box-sizing: border-box; height: 2.6rem; } #contenuto .filtri > input[type="search"], #contenuto .filtri > .segmenti, #contenuto .barra-filtri > input[type="search"], #contenuto .barra-filtri > .segmenti, #contenuto .filtri-riga > input[type="search"], #contenuto .filtri-pastiglie { grid-column: 1 / -1; } #contenuto .filtri-pastiglie { display: flex; flex-wrap: wrap; gap: .4rem; height: auto; padding: 0 .85rem; margin: 0 0 .6rem; } #contenuto .filtri > label.levetta-riga, #contenuto .barra-filtri > label.levetta-riga { display: none !important; } /* ---- 6. BLOCCHI E CAMPI ------------------------------------------ I riquadri arrivano ai bordi dello schermo, lo spazio sta dentro. */ #contenuto .sezione, #contenuto .carta, #contenuto .imp-pannello, #contenuto .imp-carta, #contenuto .pan, #contenuto .riquadro, #contenuto .scheda, #contenuto .nota-blocco, #contenuto .record, #contenuto .pr-testata, #contenuto .pr-carta, #contenuto .mg-blocco, #contenuto .tk-pan, #contenuto .record-testa { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 0 .7rem; padding: .9rem .85rem; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; } #contenuto .griglia, #contenuto .griglia-campi, #contenuto .griglia-4, #contenuto .griglia-importi, #contenuto .dati-gruppo, #contenuto .anagrafica, #contenuto .carta dl, #contenuto .cfg-riga, #contenuto .imp-griglia, #contenuto .riquadri-totali, #contenuto .ct-pannello, #contenuto .gr-area, #contenuto .otp-colonne, #contenuto .carte-dato, #contenuto .carte-anello { display: grid; grid-template-columns: 1fr; gap: .4rem; width: 100%; } #contenuto .campo { width: 100%; max-width: 100%; margin: 0 0 .7rem; box-sizing: border-box; } #contenuto input, #contenuto select, #contenuto textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; font-size: 16px; } #contenuto .stato-cliente, #contenuto .stato-pieno, #contenuto .fat-stato { white-space: nowrap; font-size: .78rem; } /* ---- 7. TABELLE -------------------------------------------------- Tutte, senza eccezioni: righe zebrate ai bordi dello schermo. Si vede una sola colonna, il nome. Si tocca la riga e si apre sotto il resto (etichetta a sinistra, valore a destra). Nessuna casella di selezione, nessuna azione massiva. */ #contenuto .tabella-scorrevole, #contenuto .tabella-scorre { border: 0; background: none; box-shadow: none; padding: 0; margin: 0; overflow-x: visible; width: 100%; } #contenuto table.tabella { display: block; width: 100%; max-width: 100%; border: 0; border-collapse: collapse; } #contenuto table.tabella > thead { display: none; } #contenuto table.tabella > tbody { display: block; width: 100%; } #contenuto table.tabella > tbody > tr { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: .7rem .85rem; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; background: transparent; cursor: pointer; } #contenuto table.tabella > tbody > tr:nth-child(odd) { background: var(--superficie-2); } #contenuto table.tabella > tbody > tr > td { display: none; width: 100%; height: auto; box-sizing: border-box; padding: 0; border: 0; text-align: left; } /* riga aperta: tutte le celle con etichetta, a coppie */ #contenuto table.tabella > tbody > tr.aperta > td[data-etichetta] { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .2rem .6rem; align-items: start; padding: .3rem 0 0; font-size: .88rem; } #contenuto table.tabella > tbody > tr.aperta > td[data-etichetta]::before { content: attr(data-etichetta); color: var(--tenue); font-size: .8rem; } #contenuto table.tabella > tbody > tr.aperta > td:empty { display: none; } #contenuto table.tabella > tbody > tr.aperta > td.azioni-riga { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .6rem; } #contenuto table.tabella > tbody > tr.aperta > td.azioni-riga::before { content: none; } /* la colonna principale: sempre in vista, mai con l'etichetta davanti */ #contenuto table.tabella > tbody > tr > td.cella-capo, #contenuto table.tabella > tbody > tr > td.mob-tit, #contenuto table.tabella > tbody > tr.aperta > td.cella-capo, #contenuto table.tabella > tbody > tr.aperta > td.mob-tit { display: block; padding: 0; font-weight: 600; font-size: .95rem; line-height: 1.35; } #contenuto table.tabella > tbody > tr > td.cella-capo::before, #contenuto table.tabella > tbody > tr > td.mob-tit::before, #contenuto table.tabella > tbody > tr.aperta > td.cella-capo::before, #contenuto table.tabella > tbody > tr.aperta > td.mob-tit::before { content: none; } #contenuto table.tabella > tbody > tr > td.mob-tit small { display: block; font-weight: 400; font-size: .8rem; color: var(--tenue); } /* rete di sicurezza: se una riga non e' stata marcata, si vede la prima cella */ #contenuto table.tabella > tbody > tr:not(:has(> td.cella-capo)):not(:has(> td.mob-tit)) > td:first-child { display: block; font-weight: 600; font-size: .95rem; } /* mai selezioni, mai barre massive */ #contenuto table.tabella td.sel, #contenuto table.tabella th.sel, #contenuto table.tabella td.scelta, #contenuto .mg-sel-barra, #contenuto .sel-barra, #contenuto .barra-massiva { display: none !important; } #contenuto table.tabella td input, #contenuto table.tabella td select, #contenuto table.tabella td textarea { width: 100%; max-width: 100%; min-width: 0; } #contenuto .solo-testo-mobile { display: inline; } /* tabelle che non usano la classe .tabella: etichetta e valore, sempre in vista */ #contenuto table:not(.tabella) { display: block; width: 100%; max-width: 100%; } #contenuto table:not(.tabella) > thead { display: none; } #contenuto table:not(.tabella) > tbody, #contenuto table:not(.tabella) > tbody > tr, #contenuto table:not(.tabella) > tbody > tr > td { display: block; width: 100%; height: auto; box-sizing: border-box; } #contenuto table:not(.tabella) > tbody > tr { padding: .7rem .85rem; border-bottom: 1px solid var(--linea); } #contenuto table:not(.tabella) > tbody > tr:nth-child(odd) { background: var(--superficie-2); } #contenuto table:not(.tabella) > tbody > tr > td { padding: .15rem 0; border: 0; font-size: .88rem; } #contenuto table:not(.tabella) > tbody > tr > td[data-etichetta]::before { content: attr(data-etichetta) ": "; color: var(--tenue); font-size: .8rem; } #contenuto table td.mob-vuota { display: none; } /* ---- 7bis. ELENCHI A CARTE E STRISCE DI FASI --------------------- Alcune pagine non usano una tabella ma una fila di riquadri, con dentro una striscia di fasi. Stessa legge delle tabelle: larghi quanto lo schermo, mai di piu'. */ #contenuto ul, #contenuto ol { padding-left: 0; list-style: none; } #contenuto li, #contenuto .riga, #contenuto .riga-carta, #contenuto .elenco-righe > *, #contenuto .carta-riga { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; overflow-x: hidden; } /* strisce di fasi, tappe e pastiglie: vanno a capo, non allungano la riga */ #contenuto .pr-passi, #contenuto .fasi, #contenuto .tappe, #contenuto .passi, #contenuto .stati-riga, #contenuto .pastiglie, #contenuto .segmenti, #contenuto .azioni-riga { display: flex; flex-wrap: wrap; gap: .3rem; width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; } #contenuto .pr-passi > *, #contenuto .fasi > *, #contenuto .tappe > *, #contenuto .passi > * { flex: 1 1 4.5rem; min-width: 0; max-width: 100%; } #contenuto .wz-passo { display: flex; min-width: 0; max-width: 100%; box-sizing: border-box; padding: .3rem .5rem; font-size: .75rem; justify-content: center; } #contenuto .wz-passo .wz-et { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* timeline verticale delle pratiche */ #contenuto .pr-timeline { padding-left: 0; width: 100%; max-width: 100%; } #contenuto .pr-tappa { grid-template-columns: 1.8rem minmax(0, 1fr); width: 100%; max-width: 100%; min-width: 0; } #contenuto .pr-tappa-corpo { min-width: 0; max-width: 100%; } /* rete di sicurezza: nessun blocco della pagina supera lo schermo */ #contenuto > *, #contenuto > * > * { max-width: 100%; box-sizing: border-box; min-width: 0; } /* ---- 7ter. STRISCE DI AVANZAMENTO (tacche) ---------------------- Da telefono si vedono solo le barrette, senza il nome della fase sotto, e stanno in cima alla riga, sopra il titolo. */ #contenuto .pr-riga, #contenuto .riga-elenco { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; width: 100%; max-width: 100%; min-width: 0; } #contenuto .pr-riga-fasi, #contenuto .pr-tacche { order: -1; display: flex; flex-wrap: nowrap; gap: .25rem; width: 100%; max-width: 100%; min-width: 0; margin: 0 0 .2rem; } #contenuto .pr-tacche > .pr-tacca, #contenuto .pr-tacca { flex: 1 1 0; min-width: 0; max-width: 100%; display: block; font-size: 0; line-height: 0; overflow: hidden; white-space: nowrap; } #contenuto .pr-tacca > * { font-size: 0; line-height: 0; } #contenuto .pr-riga-chi, #contenuto .pr-riga-quando, #contenuto .pr-pastiglia { min-width: 0; max-width: 100%; } #contenuto .pr-riga-avanti { display: none; } /* ---- 7quater. ALLINEAMENTO UNICO -------------------------------- Il contenuto non ha rientri: li mettono le fasce e i blocchi. Le tabelle dentro un blocco recuperano il rientro del blocco e arrivano ai bordi dello schermo: la zebra e' larga tutto. */ #contenuto > p, #contenuto > h2, #contenuto > h3, #contenuto > .nota, #contenuto > .messaggio, #contenuto > .aiuto, #contenuto > .vuoto { padding: 0 .85rem; } /* un blocco fatto solo di tabella o di elenco non tiene lo spazio ai lati: lo spazio sta dentro la riga, cosi' la zebra arriva ai bordi e i bottoni della riga non vengono tagliati. */ #contenuto .sezione:has(> table), #contenuto .carta:has(> table), #contenuto .sezione:has(> .tabella-scorrevole), #contenuto .carta:has(> .tabella-scorrevole), #contenuto .sezione:has(> .tabella-scorre), #contenuto .carta:has(> .tabella-scorre), #contenuto .sezione:has(> ul), #contenuto .carta:has(> ul), #contenuto .sezione:has(> ol), #contenuto .carta:has(> ol) { padding-left: 0; padding-right: 0; } #contenuto .sezione:has(> table) > *:not(table):not(ul):not(ol), #contenuto .carta:has(> table) > *:not(table):not(ul):not(ol), #contenuto .sezione:has(> ul) > *:not(table):not(ul):not(ol), #contenuto .carta:has(> ul) > *:not(table):not(ul):not(ol) { padding-left: .85rem; padding-right: .85rem; } #contenuto .sezione > table, #contenuto .carta > table, #contenuto .sezione > .tabella-scorrevole, #contenuto .carta > .tabella-scorrevole, #contenuto .sezione > .tabella-scorre, #contenuto .carta > .tabella-scorre, #contenuto .sezione > ul, #contenuto .carta > ul, #contenuto .sezione > ol, #contenuto .carta > ol { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } #contenuto .sezione > ul > li, #contenuto .carta > ul > li, #contenuto .sezione > ol > li, #contenuto .carta > ol > li { padding: .7rem .85rem; border-bottom: 1px solid var(--linea); } #contenuto .sezione > ul > li:nth-child(odd), #contenuto .carta > ul > li:nth-child(odd) { background: var(--superficie-2); } /* ---- 7quinquies. BOTTONI DENTRO LE RIGHE ------------------------ Due per riga, stessa misura; se sono dispari l'ultimo prende tutta la riga. Vale per ogni elenco del portale. */ #contenuto .azioni-riga, #contenuto .mg-azioni, #contenuto .riga-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; width: 100%; max-width: 100%; margin: .5rem 0 0; } #contenuto .azioni-riga > *, #contenuto .mg-azioni > *, #contenuto .riga-azioni > * { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; box-sizing: border-box; height: 2.5rem; margin: 0; padding: 0 .4rem; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contenuto .azioni-riga > *:last-child:nth-child(odd), #contenuto .mg-azioni > *:last-child:nth-child(odd), #contenuto .riga-azioni > *:last-child:nth-child(odd) { grid-column: 1 / -1; } /* ---- 7sexies. AVANZAMENTO A TUTTA RIGA -------------------------- Le pillole delle fasi non si tagliano: una per riga, nome intero. */ #contenuto .pr-passi, #contenuto .wz-passi { display: grid; grid-template-columns: 1fr; gap: .35rem; width: 100%; max-width: 100%; padding: 0; margin: .5rem 0 0; } #contenuto .pr-passi > .wz-passo, #contenuto .wz-passi > .wz-passo { width: 100%; max-width: 100%; box-sizing: border-box; justify-content: flex-start; padding: .5rem .8rem; font-size: .9rem; } #contenuto .wz-passo .wz-et { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; } /* ---- 7septies. MAPPE -------------------------------------------- La mappa prende tutta la larghezza dello schermo e resta sempre aperta: una mappa chiusa dentro una fisarmonica non serve a nulla. */ #contenuto .mappa-panoramica, #contenuto .mappa, #contenuto #mp-mappa { width: 100vw; max-width: 100vw; margin-left: -.85rem; margin-right: -.85rem; height: 60vh; min-height: 320px; border-radius: 0; } #contenuto .mappa-piede { padding: .5rem .85rem; } #contenuto details:has(.mappa) > summary, #contenuto details:has(.mappa-panoramica) > summary { display: none; } #contenuto details:has(.mappa) > *:not(summary), #contenuto details:has(.mappa-panoramica) > *:not(summary) { display: block; } #contenuto .sezione:has(.mappa-panoramica).fisa-chiusa > *:not(.fisa-capo), #contenuto .carta:has(.mappa).fisa-chiusa > *:not(.fisa-capo) { display: block; } #contenuto .sezione:has(.mappa-panoramica) > .fisa-capo::after, #contenuto .carta:has(.mappa) > .fisa-capo::after { content: none; } /* ---- 7octies. COVERAGE MAP -------------------------------------- Da telefono si usa solo la verifica: il riepilogo e' roba da scrivania e si nasconde. */ #contenuto .carta:has(#cop-riepilogo) { display: none; } #contenuto .carta:has(#cop-titolo) { width: 100%; max-width: 100%; } #contenuto .carta:has(#cop-titolo).fisa-chiusa > *:not(.fisa-capo) { display: block; } #contenuto .carta:has(#cop-titolo) > .fisa-capo::after { content: none; } /* ---- 8. FISARMONICHE --------------------------------------------- Le pagine partono chiuse: in vista restano testata e bottoni. Freccia verso il basso da chiuse, girata da aperte. */ #contenuto .fisa > .fisa-capo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; margin: 0; } #contenuto .fisa > .fisa-capo::after { content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue); transform: rotate(45deg); transition: transform .15s; margin: 0 .2rem 0 0; } #contenuto .fisa:not(.fisa-chiusa) > .fisa-capo::after { transform: rotate(-135deg); } #contenuto .fisa.fisa-chiusa > *:not(.fisa-capo) { display: none; } #contenuto .fisa-titolo-dato { margin: 0; font-size: 1rem; } /* ---- 9. LINGUETTE ------------------------------------------------ Non vanno a capo: scorrono dentro la loro striscia, mai la pagina. */ #contenuto nav.linguette, #contenuto .linguette, #contenuto .linguette-sedi { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .3rem; padding: 0 .85rem .4rem; margin: 0 0 .7rem; scrollbar-width: none; } #contenuto nav.linguette::-webkit-scrollbar, #contenuto .linguette::-webkit-scrollbar, #contenuto .linguette-sedi::-webkit-scrollbar { display: none; } #contenuto nav.linguette > *, #contenuto .linguette > *, #contenuto .linguette-sedi > * { flex: 0 0 auto; white-space: nowrap; } #contenuto .linguette-ruoli button { flex: 1 1 100%; border-radius: var(--raggio-piccolo); border-bottom: 1px solid var(--linea); } /* ---- 10. PAGINAZIONE --------------------------------------------- */ #contenuto .pagine { display: grid; gap: .45rem; justify-items: center; padding: .9rem .85rem 0; margin: 0; font-size: .85rem; } #contenuto .pagine > * { width: 100%; text-align: center; } #contenuto .pagine .pag-barra { display: flex; align-items: center; justify-content: center; gap: .5rem; } #contenuto .pagine button { height: 2.4rem; padding: 0 .8rem; } /* ---- 11. POPUP --------------------------------------------------- Restano quelli approvati: qui si sistema solo la misura sullo schermo stretto. */ #contenuto .tk-fin-corpo, .tk-fin-corpo { max-height: 68vh; overflow: auto; } .tk-fin-piede { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .tk-fin-piede > * { width: 100%; justify-content: center; margin: 0; } .nf-popup { width: 100%; max-width: 100%; max-height: 86vh; padding: 18px; } .nf-popup .nf-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .nf-popup .nf-azioni > * { width: 100%; justify-content: center; } #nf-avvisi { left: 12px; right: 12px; bottom: 12px; max-width: none; } /* ---- 12. SCHEDE A DUE COLONNE ----------------------------------- Qualunque scheda a colonne affiancate diventa una colonna sola: due colonne su schermo stretto schiacciano il testo fino a mandarlo a capo lettera per lettera. */ #contenuto .tk-scheda, #contenuto .tk-gest { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; width: 100%; max-width: 100%; } #contenuto .tk-col-sx, #contenuto .tk-col-dx { width: 100%; max-width: 100%; min-width: 0; } #contenuto .tk-bolla { max-width: 100%; min-width: 0; } #contenuto .tk-bolla p { overflow-wrap: break-word; } /* ---- 13. GRIGLIE DI SCHEDA ANCORA A PIU COLONNE ----------------- Qualunque griglia di campi o riquadri torna a una colonna sola. Bottoni, filtri e azioni restano a due: sono gestiti sopra. */ #contenuto .wic-griglia, #contenuto .cop-griglia, #contenuto .pr-griglia, #contenuto .mg-campi, #contenuto .srv-foto-pan, #contenuto .wz-corpo, #contenuto .carte-dato, #contenuto .carte-anello, #contenuto .riquadri-totali, #contenuto .record-fatti, #contenuto .dati-record { grid-template-columns: minmax(0, 1fr); } /* ---- 14. FISARMONICHE: MISURA UNICA ----------------------------- Testata uguale per tutte: stesso rientro a sinistra del resto della pagina, titolo a sinistra, freccia a destra, stessa altezza. */ #contenuto .fisa { padding-left: 0; padding-right: 0; } #contenuto .fisa > .fisa-capo { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; box-sizing: border-box; padding: .85rem; margin: 0; min-height: 3rem; } #contenuto .fisa > .fisa-capo > * { margin: 0; min-width: 0; } #contenuto .fisa > .fisa-capo h2, #contenuto .fisa > .fisa-capo h3, #contenuto .fisa > .fisa-capo .fisa-titolo-dato { font-size: 1.05rem; font-weight: 600; line-height: 1.3; flex: 1 1 auto; text-align: left; } #contenuto .fisa > .fisa-capo::after { flex: 0 0 auto; margin: 0; } #contenuto .fisa > *:not(.fisa-capo) { padding-left: .85rem; padding-right: .85rem; } #contenuto .fisa > table, #contenuto .fisa > .tabella-scorrevole, #contenuto .fisa > .tabella-scorre, #contenuto .fisa > ul, #contenuto .fisa > ol { padding-left: 0; padding-right: 0; } /* ---- 15. CALENDARIO --------------------------------------------- Sette colonne restano sette: si abbassano le celle e il contenuto sta dentro, cosi il mese intero entra nello schermo. */ #contenuto .cal-griglia { grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; max-width: 100%; gap: 1px; } #contenuto .cal-griglia > * { min-width: 0; min-height: 3.2rem; padding: .2rem .15rem; box-sizing: border-box; overflow: hidden; font-size: .78rem; } #contenuto .cal-griglia .cal-num, #contenuto .cal-griglia > * > b { font-size: .8rem; } #contenuto .cal-ev, #contenuto .cal-griglia .pastiglia, #contenuto .cal-griglia a, #contenuto .cal-griglia small { display: block; width: 100%; max-width: 100%; min-width: 0; font-size: .62rem; line-height: 1.15; padding: .05rem .15rem; margin: .1rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contenuto .cal-legenda, #contenuto .cal-capo { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; } /* ---- 16. CALENDARIO: classi vere -------------------------------- cal-cella e cal-voce sono i nomi reali. La griglia arriva ai due bordi dello schermo, le celle stanno dentro la loro colonna. */ #contenuto .cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; } #contenuto .cal-testa { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; max-width: 100%; box-sizing: border-box; } #contenuto .cal-cella { min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 3.4rem; padding: .2rem .15rem; overflow: hidden; } #contenuto .cal-num { font-size: .8rem; } #contenuto .cal-voce, #contenuto .cal-p { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; font-size: .6rem; line-height: 1.15; padding: .05rem .1rem; margin: .1rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contenuto .cal-legenda { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .78rem; } /* ---- 17. LEGENDA DEL CALENDARIO --------------------------------- I quadratini restano quadratini: una voce per riga, pallino a sinistra e scritta accanto, senza andare a capo. */ #contenuto .cal-legenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: .6rem .85rem; font-size: .82rem; } #contenuto .cal-legenda > * { display: flex; align-items: center; gap: .45rem; width: 100%; min-width: 0; } #contenuto .cal-legenda span, #contenuto .cal-legenda i, #contenuto .cal-legenda em, #contenuto .cal-legenda b { flex: 0 0 auto; } #contenuto .cal-legenda .cal-p, #contenuto .cal-legenda > * > span:first-child, #contenuto .cal-legenda > * > i:first-child { width: .85rem; height: .85rem; min-width: .85rem; max-width: .85rem; flex: 0 0 .85rem; border-radius: 3px; padding: 0; margin: 0; display: inline-block; font-size: 0; } /* ---- 19. TABELLE elenco-mob ------------------------------------- Sono le tabelle marcate da comune.js con mob-tit / mob-alto / mob-stato: la riga mostra il nome, il resto sta sotto. Valgono per tutte le pagine che usano elenco-mob. */ #contenuto table.elenco-mob { display: block; width: 100%; max-width: 100%; } #contenuto table.elenco-mob > thead { display: none; } #contenuto table.elenco-mob > tbody { display: block; width: 100%; } #contenuto table.elenco-mob > tbody > tr { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: .7rem .85rem; margin: 0; border: 0; border-bottom: 1px solid var(--linea); } #contenuto table.elenco-mob > tbody > tr:nth-child(odd) { background: var(--superficie-2); } #contenuto table.elenco-mob > tbody > td, #contenuto table.elenco-mob > tbody > tr > td { display: none; width: 100%; max-width: 100%; min-width: 0; height: auto; padding: 0; border: 0; text-align: left; box-sizing: border-box; } #contenuto table.elenco-mob > tbody > tr > td.mob-tit { display: block; font-weight: 600; font-size: .95rem; line-height: 1.35; } #contenuto table.elenco-mob > tbody > tr > td.mob-tit small { display: block; font-weight: 400; font-size: .8rem; color: var(--tenue); } #contenuto table.elenco-mob > tbody > tr > td.mob-alto, #contenuto table.elenco-mob > tbody > tr > td.mob-stato { display: block; font-size: .8rem; color: var(--tenue); margin: .1rem 0 0; } #contenuto table.elenco-mob > tbody > tr > td.azioni-riga { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: .5rem 0 0; } #contenuto table.elenco-mob > tbody > tr > td.azioni-riga > * { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; box-sizing: border-box; height: 2.4rem; margin: 0; padding: 0 .4rem; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contenuto table.elenco-mob > tbody > tr > td.azioni-riga > *:last-child:nth-child(odd) { grid-column: 1 / -1; } #contenuto table.elenco-mob td.mg-chk, #contenuto table.elenco-mob td.tk-chk, #contenuto table.elenco-mob td.sel, #contenuto table.elenco-mob td.scelta { display: none; } /* ---- 25. CELLA AZIONI marcata da comune.js ---------------------- Verificato in console: display grid sulla cella dispone i bottoni su due colonne. La classe nf-azioni-mob la mette comune.js solo sotto i 900px, cosi il desktop resta intatto. */ #contenuto td.nf-azioni-mob { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .45rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: .5rem 0 0 !important; padding: 0 !important; box-sizing: border-box !important; white-space: normal !important; vertical-align: top !important; } #contenuto td.nf-azioni-mob::before { content: none !important; } #contenuto td.nf-azioni-mob > button, #contenuto td.nf-azioni-mob > a { display: inline-flex !important; align-items: center; justify-content: center; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; height: 2.4rem; margin: 0 !important; padding: 0 .4rem; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contenuto td.nf-azioni-mob > *:last-child:nth-child(odd) { grid-column: 1 / -1; } /* ---- 26. SCHEDA CLIENTE E ELENCHI ------------------------------- Misurato: fila-2 teneva due colonne da 183px e i bottoni uscivano sopra i titoli; la mappa Leaflet sforava di 17.000px. */ #contenuto .fila-2, #contenuto .colonne, #contenuto .due-col, #contenuto .colonna, #contenuto .wic-pan { display: block; width: 100%; max-width: 100%; min-width: 0; } #contenuto .fila-2 > * { width: 100%; max-width: 100%; min-width: 0; margin: 0 0 .7rem; } #contenuto .mappa, #contenuto .leaflet-container { width: 100%; max-width: 100%; height: 50vh; min-height: 280px; } #contenuto .leaflet-container, #contenuto .mappa { overflow: hidden; } /* i bottoni dentro le schede non escono dal loro riquadro */ #contenuto .carta .piede-carta, #contenuto .sezione .piede-carta, #contenuto .carta > header .azioni { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; width: 100%; margin: .6rem 0 0; } #contenuto .carta .piede-carta > *, #contenuto .sezione .piede-carta > * { width: 100%; min-width: 0; box-sizing: border-box; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0 .4rem; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contenuto .carta .piede-carta > *:last-child:nth-child(odd), #contenuto .sezione .piede-carta > *:last-child:nth-child(odd) { grid-column: 1 / -1; } /* ---- 27. TESTATE DI BLOCCO CON BOTTONI -------------------------- Misurato 29/10: nelle testate dei blocchi (header.fisa-capo, header.tc-capo, header della scheda cliente) titolo, pastiglie e bottoni finivano nello stesso posto: 9 sovrapposizioni su Anagrafica, 2 su Categorie e causali dei ticket. Qui titolo e pastiglie in alto, bottoni su riga propria a due colonne, freccia in alto a destra. */ #contenuto .fisa > .fisa-capo, #contenuto .carta > header, #contenuto .sezione > header, #contenuto .elenco-righe > header, #contenuto .record > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .35rem .5rem; width: 100%; box-sizing: border-box; padding: .85rem; margin: 0; } #contenuto .fisa > .fisa-capo > h2, #contenuto .fisa > .fisa-capo > h3, #contenuto .fisa > .fisa-capo > strong, #contenuto .fisa > .fisa-capo > .fisa-titolo-dato, #contenuto .carta > header > h2, #contenuto .sezione > header > h2, #contenuto .elenco-righe > header > h2, #contenuto .record > header > h2 { order: 1; flex: 1 1 55%; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; text-align: left; } #contenuto .fisa > .fisa-capo > .tc-pal, #contenuto .fisa > .fisa-capo > span.contatore, #contenuto .carta > header > span.contatore, #contenuto .sezione > header > span.contatore, #contenuto .record > header > span.contatore { order: 1; flex: 0 0 auto; min-width: 0; margin: 0; } #contenuto .fisa > .fisa-capo::after { order: 2; flex: 0 0 auto; margin: 0 0 0 auto; } #contenuto .fisa > .fisa-capo > .azioni-riga, #contenuto .fisa > .fisa-capo > .azioni, #contenuto .fisa > .fisa-capo > .tc-azioni, #contenuto .carta > header > .azioni-riga, #contenuto .carta > header > .azioni, #contenuto .sezione > header > .azioni-riga, #contenuto .sezione > header > .azioni, #contenuto .elenco-righe > header > .azioni-riga, #contenuto .record > header > .azioni-riga, #contenuto .record > header > .azioni { order: 3; flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; width: 100%; min-width: 0; max-width: 100%; margin: .3rem 0 0; } #contenuto .fisa > .fisa-capo > .azioni-riga > *, #contenuto .fisa > .fisa-capo > .azioni > *, #contenuto .fisa > .fisa-capo > .tc-azioni > *, #contenuto .carta > header > .azioni-riga > *, #contenuto .carta > header > .azioni > *, #contenuto .sezione > header > .azioni-riga > *, #contenuto .sezione > header > .azioni > *, #contenuto .elenco-righe > header > .azioni-riga > *, #contenuto .record > header > .azioni-riga > *, #contenuto .record > header > .azioni > * { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; box-sizing: border-box; height: 2.4rem; margin: 0; padding: 0 .4rem; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contenuto .fisa > .fisa-capo > .azioni-riga > *:last-child:nth-child(odd), #contenuto .fisa > .fisa-capo > .tc-azioni > *:last-child:nth-child(odd), #contenuto .carta > header > .azioni-riga > *:last-child:nth-child(odd), #contenuto .sezione > header > .azioni-riga > *:last-child:nth-child(odd), #contenuto .elenco-righe > header > .azioni-riga > *:last-child:nth-child(odd), #contenuto .record > header > .azioni-riga > *:last-child:nth-child(odd) { grid-column: 1 / -1; } /* ---- 28. RIGHE DEI SERVIZI NELLA SCHEDA CLIENTE ----------------- Misurato: button.wic-riga e flex, lo span sinistro e largo 224px ma il codice ha white-space:nowrap e tracima sotto il prezzo. Qui il codice va a capo e le due colonne restano separate. */ #contenuto .wic-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .3rem .6rem; width: 100%; max-width: 100%; box-sizing: border-box; text-align: left; padding: .6rem .85rem; } #contenuto .wic-riga > * { min-width: 0; max-width: 100%; } #contenuto .wic-riga .wr-dx { grid-column: 2; justify-self: end; text-align: right; white-space: nowrap; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; } #contenuto .wic-riga .wr-cod, #contenuto .wic-riga .wr-nome, #contenuto .wic-riga small { display: block; white-space: normal; overflow-wrap: break-word; min-width: 0; max-width: 100%; } #contenuto .wic-riga .wr-cod { font-size: .8rem; color: var(--tenue); } #contenuto .wic-riga .wr-nome { font-weight: 600; font-size: .92rem; line-height: 1.3; } /* ---- 29. BOTTONE APRI VIA DAGLI ELENCHI ------------------------- Misurato: il link ha la classe nf-apri-mob ma sta dentro td.nf-azioni-mob, i cui figli hanno display:inline-flex !important. Qui si nasconde con la stessa forza. */ #contenuto a.nf-apri-mob, #contenuto td.nf-azioni-mob > a.nf-apri-mob, #contenuto .azioni-riga > a.nf-apri-mob { display: none !important; } /* se la cella resta senza bottoni non lascia spazio vuoto */ #contenuto td.nf-azioni-mob:not(:has(> button)):not(:has(> a:not(.nf-apri-mob))) { display: none !important; } /* ---- 31. AZIONI DELLA TESTATA PREVENTIVO ----------------------- Solo .azioni-stato, misurato su DIV.azioni.azioni-stato con 5 bottoni di larghezze diverse. NON tocca .azioni in generale: quella aggancia anche la testata del cliente. */ #contenuto .azioni-stato { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; width: 100%; max-width: 100%; margin: .6rem 0 0; } #contenuto .azioni-stato > button, #contenuto .azioni-stato > a.bottone, #contenuto .azioni-stato > a.secondario { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; height: 2.6rem; margin: 0; padding: 0 .5rem; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contenuto .azioni-stato > *:last-child:nth-child(odd) { grid-column: 1 / -1; } #contenuto .azioni-stato > .stato-cliente, #contenuto .azioni-stato > .stato-pieno, #contenuto .azioni-stato > .fat-stato { grid-column: 1 / -1; width: auto; justify-self: start; height: auto; } /* ---- 32. RIENTRO DENTRO LE LINGUETTE DEL CLIENTE ---------------- Misurato sul telefono: schermo 384, scroll 384, niente sborda. Il difetto era l'opposto: il contenuto della linguetta partiva incollato al bordo mentre i blocchi sopra avevano il rientro. */ #contenuto .tab-cliente, #contenuto .tab-cliente > .sezione-testa, #contenuto .tab-cliente > h2, #contenuto .tab-cliente > h3, #contenuto .tab-cliente > p, #contenuto .tab-cliente > .sottotitolo, #contenuto .tab-cliente > .nota, #contenuto .tab-cliente > .azioni, #contenuto .tab-cliente > .barra-azioni, #contenuto .tab-cliente > .piede-carta, #contenuto .tab-cliente > .vuoto, #contenuto .tab-cliente > .messaggio { padding-left: .85rem; padding-right: .85rem; box-sizing: border-box; } /* tabelle ed elenchi restano a tutta larghezza: lo spazio sta nella riga */ #contenuto .tab-cliente > table, #contenuto .tab-cliente > ul, #contenuto .tab-cliente > ol, #contenuto .tab-cliente > .tabella-scorrevole, #contenuto .tab-cliente > .tabella-scorre { padding-left: 0; padding-right: 0; } /* ---- 36. BRICIOLE: batte app.css -------------------------------- Misurato in console: app.css impone #contenuto .briciole, .imp-briciole { padding: 0 !important } fuori da ogni @media. Qui selettore piu pesante e !important. */ #contenuto p.briciole.briciole, #contenuto .imp-briciole.imp-briciole, main.contenuto > p.briciole { padding-left: .85rem !important; padding-right: .85rem !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; margin: 0 0 .3rem !important; font-size: .8rem; } #contenuto p.briciole.briciole > *, #contenuto .imp-briciole.imp-briciole > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } /* ---- 37. TASTO INDIETRO NELLE BRICIOLE -------------------------- */ #contenuto .nf-indietro, .briciole-guscio .nf-indietro { flex: 0 0 auto; display: inline-flex; align-items: center; height: 2rem; padding: 0 .7rem; margin: 0 .4rem 0 0; border: 1px solid var(--linea-forte); border-radius: var(--raggio-piccolo); background: var(--superficie); font-size: .82rem; font-weight: 600; white-space: nowrap; cursor: pointer; } /* ---- 38. RIGHE elenco-mob APRIBILI AL TOCCO --------------------- */ #contenuto table.elenco-mob > tbody > tr[data-mob-apri] { cursor: pointer; } #contenuto table.elenco-mob > tbody > tr.aperta > td[data-etichetta] { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .2rem .6rem; align-items: start; padding: .3rem 0 0; font-size: .88rem; } #contenuto table.elenco-mob > tbody > tr.aperta > td[data-etichetta]::before { content: attr(data-etichetta); color: var(--tenue); font-size: .8rem; } #contenuto table.elenco-mob > tbody > tr.aperta > td:empty { display: none; } #contenuto table.elenco-mob > tbody > tr.aperta > td.mob-tit, #contenuto table.elenco-mob > tbody > tr.aperta > td.mob-tit::before { display: block; content: none; } #contenuto table.elenco-mob > tbody > tr.aperta > td.mob-tit { padding: 0; font-weight: 600; } /* ---- 39. GRAFICO AD ANELLO: niente taglio in alto --------------- Misurato: svg.anello-svg ha viewBox 0 0 100 100, cerchio r=42 con contorno 9px e un pallino sul bordo; overflow:hidden lo tagliava. */ #contenuto .anello-svg { overflow: visible !important; } #contenuto .carta-anello { overflow: visible !important; } #contenuto .carta-anello, #contenuto .griglia-riepilogo { padding-top: .6rem; } /* ---- 40. FILTRI: l'etichetta col campo dentro non ha altezza fissa Misurato: barra-filtri finiva a 1031 ma la tendina dentro la label arrivava a 1049, uscendo dal riquadro e coprendo il titolo sotto. L'altezza fissa di 2.6rem valeva anche per le label, che pero' contengono testo PIU' il campo. */ #contenuto .barra-filtri, #contenuto .filtri, #contenuto .filtri-riga { align-items: start; } #contenuto .barra-filtri > label, #contenuto .filtri > label, #contenuto .filtri-riga > label { display: flex; flex-direction: column; gap: .2rem; height: auto; min-height: 0; font-size: .8rem; line-height: 1.2; } #contenuto .barra-filtri > label > select, #contenuto .barra-filtri > label > input, #contenuto .filtri > label > select, #contenuto .filtri > label > input, #contenuto .filtri-riga > label > select, #contenuto .filtri-riga > label > input { width: 100%; height: 2.6rem; box-sizing: border-box; } /* ---- 41. RIGHE DELL ELENCO ANOMALIE ----------------------------- Misurato 29/10 su Conformita > Alert: 40 sovrapposizioni. La riga e