/* ===================================================================== PWA Business Area: layout desktop (da 992px). Smartphone e tablet invariati. ===================================================================== */ @media (min-width: 992px) { :root { --pwa-max: 1200px; --pwa-navy: #112c45; } /* ---------- HOME CONSULENTE (consulente/index.php) ---------- */ body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) { max-width: var(--pwa-max); display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: stretch; padding-top: 24px; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) > section { margin: 0 !important; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.utente { grid-column: 1 / 8; align-self: center; padding: 0 !important; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.periodo { grid-column: 8 / 13; align-self: center; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.obiettivi { grid-column: 1 / 7; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.btn-group { grid-column: 7 / 13; display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 0; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.btn-group .box { width: auto; max-width: none !important; margin: 0 !important; min-height: 0; display: flex; align-items: center; justify-content: center; } /* credito Dalmesse: primo riquadro btn100 senza classe di sezione */ body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.btn100:not(.largo-consumo):not(.beni-durevoli):not(.provvigioni):not(.materiale):not(.gruppo):not(.zona):not(.area):not(.azienda) { grid-column: 1 / 5; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.reclutamenti { grid-column: 5 / 13; } /* quattro aree di lavoro in riga */ body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.largo-consumo, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.beni-durevoli, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.provvigioni, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.materiale { grid-column: span 6; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.btn100 .col-6 { min-height: 140px; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.largo-consumo .label, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.beni-durevoli .label, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.provvigioni .label, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) section.materiale .label { font-size: 24px !important; line-height: 28px !important; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) .box { transition: box-shadow .2s ease, transform .2s ease; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo) .box:has(a):hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(17, 44, 69, .45); } /* pannello "Condividi il tuo D-Shop": linguetta centrata invece di barra a tutta larghezza */ body.consulente:has(section.utente):has(section.periodo) .d-shop { left: 50%; transform: translateX(-50%); max-width: 560px; border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .35); } } @media (min-width: 992px) { /* ---------- PAGINE INTERNE: colonna centrale leggibile ---------- */ body > .container.pb-110 { max-width: 1000px; padding-top: 16px; } } @media (min-width: 992px) { /* ---------- PROVVIGIONI: largo consumo e beni durevoli affiancati ---------- */ body.prov-page > .container.pb-110 { max-width: var(--pwa-max); display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: stretch; } body.prov-page > .container.pb-110 > * { grid-column: 1 / -1; min-width: 0; } body.prov-page > .container.pb-110 > section.box-level { grid-column: auto; margin-top: 0 !important; display: flex !important; flex-direction: column; } body.prov-page > .container.pb-110 > section.box-level > :last-child { margin-top: auto !important; } } @media (min-width: 992px) { /* ---------- MENU: pannello laterale a destra invece della tendina a tutta pagina ---------- */ .header-bar .nav-links { top: 85px; right: 0; left: auto; margin: 0; width: 380px !important; height: calc(100vh - 85px); padding: 8px 0 32px !important; align-items: stretch; justify-content: flex-start; overflow-y: auto; /* ombra-velo solo a sinistra: la barra in alto resta chiara */ clip-path: inset(0 0 0 -100vw) !important; -webkit-clip-path: inset(0 0 0 -100vw) !important; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, box-shadow .3s ease, visibility 0s linear .3s; box-shadow: 0 0 0 100vmax rgba(8, 22, 36, 0); } .header-bar .nav-links.open { transform: none; visibility: visible; transition: transform .3s ease, box-shadow .3s ease, visibility 0s; box-shadow: 0 0 0 100vmax rgba(8, 22, 36, .45); } .header-bar .nav-links li { text-align: left; line-height: 50px; font-size: 17px; margin: 0 !important; transition: opacity .25s ease !important; } .header-bar .nav-links > li { padding: 0; } .header-bar .nav-links li a { display: block; margin: 0; padding: 0 56px 0 28px; } .header-bar .nav-links li a::before { display: none; } .header-bar .nav-links li a:hover { background: rgba(255, 255, 255, .06); color: #61DAFB; } .header-bar .nav-links li li { line-height: 44px; font-size: 15px; } .header-bar .nav-links li li a { padding-left: 44px; color: rgba(255, 255, 255, .8); } .header-bar .nav-links li .icon { right: 20px; top: 13px; cursor: pointer; } .header-bar .nav-links > li:last-child { margin-bottom: 0 !important; } } @media (min-width: 992px) { /* ---------- ORDINI (ordini.php): quattro riquadri 2x2, icona piccola e titolo centrato ---------- */ body > .container.pb-110:has(> section.btn-slim) { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; } body > .container.pb-110:has(> section.btn-slim) > section.header-page { grid-column: 1 / -1; margin-bottom: 10px !important; } section.btn-slim { margin: 0 !important; padding: 0 !important; border-radius: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } section.btn-slim:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(17, 44, 69, .45); } section.btn-slim > a { display: block; text-decoration: none; color: #212529; } section.btn-slim .row { flex-wrap: nowrap; align-items: center; min-height: 150px; padding: 20px 24px; position: relative; } section.btn-slim .col-3 { flex: 0 0 110px; width: 110px; max-width: 110px; padding: 0; } section.btn-slim .img-box { width: 90px !important; height: 90px !important; max-width: none; object-fit: contain; margin: 0 !important; } section.btn-slim .col-9 { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; padding-left: 20px; } section.btn-slim .col-9 > div { margin: 0 !important; } section.btn-slim .label, section.btn-slim .col-9 > div > span:first-child { font-size: 24px !important; line-height: 30px !important; font-weight: 700; } section.btn-slim .sottotitolo { font-size: 16px; opacity: .75; } section.btn-slim .alert-not { position: absolute; top: 16px; right: 16px; } } @media (min-width: 992px) { /* ---------- MATERIALE DI LAVORO DIGITALE: griglia 2x2, immagini non deformate ---------- */ body.materiale-digitale .box-wrapper { margin: 30px 0 0 !important; } body.materiale-digitale .box-wrapper > .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; } body.materiale-digitale .box-wrapper .box { width: auto; max-width: none; margin: 0 !important; border-radius: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } body.materiale-digitale .box-wrapper .box:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(17, 44, 69, .45); } body.materiale-digitale .box-wrapper .box > a { display: block; text-decoration: none; } body.materiale-digitale .box .row:first-child .col { display: flex; justify-content: center; align-items: center; height: 170px; } body.materiale-digitale .box .col img { width: auto; height: 150px; max-height: none; clip-path: inset(4px); } /* le jpg hanno un filo chiaro sui bordi */ body.materiale-digitale .box:nth-child(1) .row:first-child .col { background: #112d45; } body.materiale-digitale .box:nth-child(2) .row:first-child .col { background: #e19ebd; } body.materiale-digitale .box:nth-child(3) .row:first-child .col { background: #005cff; } body.materiale-digitale .box:nth-child(4) .row:first-child .col { background: #00cd61; } body.materiale-digitale .box .row:last-child .col { font-size: 18px; padding: 16px 0 !important; } } @media (min-width: 992px) { /* ---------- HOME CAPOGRUPPO (capogruppo/index.php): stessa griglia della home consulente con in testa i riquadri di gruppo (Il tuo gruppo, Provvigioni, Statistiche) ---------- */ body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo) > section.gruppo, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo) > section.provvigioni, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo) > section.zona, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo) > section.largo-consumo, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo) > section.beni-durevoli, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo) > section.materiale { grid-column: span 4; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo) section.gruppo .label, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo) section.zona .label { font-size: 24px !important; line-height: 28px !important; } /* titolo "ATTIVITÀ DA CONSULENTE" come separatore a tutta larghezza */ body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo) > div.text-center { grid-column: 1 / -1; padding: 12px 0 0 !important; text-align: left !important; font-size: 16px !important; letter-spacing: .06em; color: var(--pwa-navy) !important; border-bottom: 2px solid var(--pwa-navy); padding-bottom: 8px !important; } } @media (min-width: 992px) { /* ---------- CAPOGRUPPO: elenco consulenti (capogruppo/consulenti.php) su due colonne ---------- */ body.capogruppo > .container.pb-110:has(> section.reclutamento) { max-width: var(--pwa-max); display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-content: start; } body.capogruppo > .container.pb-110:has(> section.reclutamento) > :not(section.reclutamento) { grid-column: 1 / -1; } body.capogruppo > .container.pb-110:has(> section.reclutamento) > section.reclutamento { margin: 0 0 20px !important; min-width: 0; } /* ---------- CAPOGRUPPO e RESP. AREA: provvigioni, riquadri livello su tre colonne ---------- */ body.capogruppo > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level), body.resp-area > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) { max-width: var(--pwa-max); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; } body.capogruppo > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > *, body.resp-area > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > * { grid-column: 1 / -1; min-width: 0; } body.capogruppo > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > section.box-level, body.resp-area > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > section.box-level { grid-column: auto; margin-top: 0 !important; display: flex !important; flex-direction: column; } body.capogruppo > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > section.box-level > :last-child, body.resp-area > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > section.box-level > :last-child { margin-top: auto !important; } /* i due riquadri clienti affiancati */ body.capogruppo > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > section.clienti, body.resp-area > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > section.clienti { grid-column: 1 / 2; margin-top: 0 !important; } body.capogruppo > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > section.clienti + section.clienti, body.resp-area > .container.pb-110:has(> section.box-level ~ section.box-level ~ section.box-level) > section.clienti + section.clienti { grid-column: span 2; } } @media (min-width: 992px) { /* ---------- RIQUADRI CON FASCIA COLORATA A SINISTRA (btn100 img-dx con icona bianca) ---------- la fascia di sfondo è larga 183px: la colonna dell'icona resta larga uguale, altrimenti su riquadri larghi l'icona bianca finisce sul fondo bianco e sparisce */ section.btn100.img-dx .row > .col-6:first-child:has(> .icon) { flex: 0 0 183px; max-width: 183px; padding: 0; } section.btn100.img-dx .row > .col-6:first-child:has(> .icon) > .icon { width: 153px; } section.btn100.img-dx .row > .col-6:first-child:has(> .icon) + .col-6 { flex: 1 1 0; min-width: 0; max-width: none; } /* ---------- STATISTICHE (statistiche.php): tre riquadri in riga ---------- */ body > .container.pb-110:has(> section.btn100.provvigioni):not(:has(> section.utente)) { max-width: var(--pwa-max); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-content: start; } body > .container.pb-110:has(> section.btn100.provvigioni):not(:has(> section.utente)) > :not(section.btn100) { grid-column: 1 / -1; } body > .container.pb-110:has(> section.btn100.provvigioni):not(:has(> section.utente)) > section.btn100 { margin: 0 !important; transition: transform .2s ease, box-shadow .2s ease; } body > .container.pb-110:has(> section.btn100.provvigioni):not(:has(> section.utente)) > section.btn100:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(17, 44, 69, .45); } body > .container.pb-110:has(> section.btn100.provvigioni):not(:has(> section.utente)) > section.btn100 .label { font-size: 22px !important; line-height: 26px !important; } } @media (min-width: 992px) { /* ---------- HOME RESPONSABILE DI ZONA (resp-zona/index.php): qui i riquadri di ruolo sono
…
, quindi le celle della griglia sono i link ---------- */ body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> a > section.btn100) > a, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> a > section.btn100) > section.zona { grid-column: span 6; display: block; text-decoration: none; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> a > section.btn100) > a > section { margin: 0 !important; height: 100%; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> a > section.btn100) .label { font-size: 22px !important; line-height: 26px !important; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> a > section.btn100) > section.largo-consumo, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> a > section.btn100) > section.beni-durevoli, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> a > section.btn100) > section.materiale { grid-column: span 4; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> a > section.btn100) > div.text-center { grid-column: 1 / -1; padding: 12px 0 8px !important; text-align: left !important; font-size: 16px !important; letter-spacing: .06em; color: var(--pwa-navy) !important; border-bottom: 2px solid var(--pwa-navy); } } @media (min-width: 992px) { /* ---------- RESP. ZONA: provvigioni (resp-zona/provvigioni.php), quattro riquadri livello 2x2 ---------- */ body.resp-zona > .container.pb-110:has(> section.box-level ~ section.box-level) { max-width: var(--pwa-max); display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; } body.resp-zona > .container.pb-110:has(> section.box-level ~ section.box-level) > * { grid-column: 1 / -1; min-width: 0; } body.resp-zona > .container.pb-110:has(> section.box-level ~ section.box-level) > section.box-level, body.resp-zona > .container.pb-110:has(> section.box-level ~ section.box-level) > section.clienti { grid-column: auto; margin-top: 0 !important; } body.resp-zona > .container.pb-110:has(> section.box-level ~ section.box-level) > section.box-level { display: flex !important; flex-direction: column; } body.resp-zona > .container.pb-110:has(> section.box-level ~ section.box-level) > section.box-level > :last-child { margin-top: auto !important; } } @media (min-width: 992px) { /* ---------- HOME RESPONSABILE D'AREA (resp-area/index.php): Area, Zona, Gruppo in riga da tre, Provvigioni e Statistiche (secondo riquadro .zona) in riga da due ---------- */ body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.area) > section.area { grid-column: span 4; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.area) > section.provvigioni, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.area) > section.zona ~ section.zona { grid-column: span 6; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.area) section.area .label { font-size: 24px !important; line-height: 28px !important; } } @media (min-width: 992px) { /* etichette dei riquadri nelle home di ruolo (capogruppo, zona, area): 22px per stare su una riga */ body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.gruppo, > a > section.gruppo) section.btn100 .label { font-size: 22px !important; line-height: 26px !important; } } @media (min-width: 992px) { /* ---------- HOME AZIENDA (azienda/index.php): Azienda, Area, Zona in riga da tre, Gruppo e Provvigioni in riga da due ---------- */ body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.azienda) > section.azienda { grid-column: span 4; } body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.azienda) > section.gruppo, body.consulente > .container.pb-110:has(> section.utente):has(> section.periodo):has(> section.azienda) > section.provvigioni { grid-column: span 6; } /* ---------- ELENCHI A SCHEDE caricati in #risultati (aree, zone, consulenti...): due colonne ---------- */ body > .container.pb-110:has(> #risultati > a > section.reclutamento) { max-width: var(--pwa-max); } #risultati:has(> a > section.reclutamento) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: stretch; } #risultati:has(> a > section.reclutamento) > :not(a) { grid-column: 1 / -1; } #risultati > a:has(> section.reclutamento) { display: flex; text-decoration: none; color: inherit; min-width: 0; } #risultati > a > section.reclutamento { flex: 1; margin: 20px 0 0 !important; } }