/* ══════════════════════════════════════════════════════════════════════════ mobile.css — Layer responsive parallelo (tablet + telefono). Gemello di print.css: il desktop NON viene toccato — ogni regola vive dentro una @media. Soglie: · TABLET 768–1024px → layout a 2 colonne ridotto · TELEFONO ≤ 767px → colonna singola (phone-first) mobile.js inietta: hamburger nella slim-header + pannello a scomparsa, dropdown selettore paesi, scroller tabelle con prima colonna bloccata, toggle grafico. ══════════════════════════════════════════════════════════════════════════ */ /* ─── Hide di base degli elementi iniettati (mostrati nelle @media più avanti, che vincono a parità di specificità perché seguono nel sorgente). ──────── */ .m-nav, .m-slim-burger, .m-slim-title, .m-cover-cta, .m-country-dd, .m-kpi-dots, .m-detail-modal, .m-chart-hint, .m-chart-mode { display: none; } /* Gruppo "Anno + select" (RUE): trasparente al layout su desktop (display :contents → invariato); su mobile diventa una riga propria (vedi @media). */ .m-anno-group { display: contents; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ A. ≤ 1024px — REGOLE COMUNI A TABLET E TELEFONO ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { /* Padding orizzontale di pagina ridotto */ .page { --page-pad-inline: clamp(14px, 3.2vw, 22px); } /* CHROME DI SAFARI/iOS BLU - TUTTE LE PAGINE, TUTTE LE LARGHEZZE MOBILE. iOS Safari campiona lo sfondo del per tingere la barra in alto (status bar) e quella in basso (toolbar): mettendo SOLO l' blu il restava bianco e la chrome restava bianca (e in alto appariva una finta "sfumatura"). Quindi rendiamo BLU sia sia . Il bianco era pero' il backdrop del mix-blend-mode:multiply di .page (multiply su bianco = identita', quindi no-op visivo): se lo rendiamo blu, .page e tutto il contenuto si scurirebbero. Per evitarlo diamo a .page uno sfondo OPACO equivalente (orange-87 20% su bianco = identico al multiply-su-bianco) e blend NORMALE: il contenuto resta identico e il blu del body emerge SOLO nella chrome/safe-area. */ html, body { background-color: var(--it-color-blue-20); } .page { background-color: color-mix(in srgb, var(--it-color-orange-87) 20%, var(--it-color-white)); mix-blend-mode: normal; isolation: isolate; } /* ─── SLIM HEADER mobile = logo + nome pagina + hamburger ───────────── Restano SOLO il logo (::before di .slim-entity) e l'hamburger; al posto della label "Camera dei deputati" si stampa il nome della pagina. */ .slim-header { gap: 10px; flex-wrap: nowrap; padding-top: 8px; padding-bottom: 8px; min-height: 50px; } /* Nasconde (solo pagine indicatore, NON index): separatore "·", link "Indicatori economici e finanziari", blocco "Aggiornamento". */ body:not([data-page="index"]) .slim-header .sep, body:not([data-page="index"]) .slim-header .slim-right, body:not([data-page="index"]) .slim-header > span:not(.sep):not(.m-slim-title) { display: none !important; } /* Solo il logo: testo nascosto, monogramma conservato e ingrandito */ body:not([data-page="index"]) .slim-header .slim-entity { font-size: 0; gap: 0; flex-shrink: 0; } /* INDEX: "Camera dei deputati" alla STESSA dimensione del titolo "Indicatori economici e finanziari" delle pagine interne (.m-slim-title = 16px). Senza questo ereditava i 14px di .slim-header. */ body[data-page="index"] .slim-header .slim-entity { font-size: 16px !important; } .slim-header .slim-entity::before { width: 30px; height: 30px; } .m-slim-title { display: block; flex: 1 1 auto; min-width: 0; font-family: var(--it-font-sans); font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--it-color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; cursor: pointer; } a.m-slim-title:hover { opacity: 0.85; } .m-slim-burger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; background: transparent; border: 0; border-radius: var(--it-radius-smooth, 4px); color: var(--it-color-white); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } /* Hover senza sfondo chiaro: resta trasparente come lo stato base. */ .m-slim-burger:hover { background: transparent; } .m-slim-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .m-slim-burger svg { width: 24px; height: 24px; display: block; } /* Nav desktop nascosta, megamenu mobile attivo */ .it-header-nav, .it-header-nav-sentinel { display: none !important; } .m-nav { display: block; } /* ─── Main header: titolo + sottotitolo, badge nascosto ────────────── */ .main-header { gap: 12px; } .main-header .titles h1 { font-size: clamp(20px, 5vw, 26px); } .main-header .titles p { font-size: clamp(13px, 3.4vw, 15px); } /* ─── Main: ritmo verticale più compatto ───────────────────────────── */ .main { gap: 60px; padding-top: 40px; padding-bottom: clamp(18px, 4vw, 26px); } /* Respiro tra la section-label e il blocco sottostante (richiesta utente: 10px). */ .section-label { margin-bottom: 10px; } /* ─── BOX DEI GRAFICI: full-bleed + niente bordo/blend ─────────────── I pannelli grafico sforano il padding di pagina (margini negativi) così il grafico usa la MASSIMA larghezza. Titolo, selettori e note rientrano del padding per restare allineati al testo. Annullato il mix-blend-mode multiply: rendeva trasparenti le tendine bianche (dropdown/menu). */ .chart-panel { border: none !important; background: transparent !important; border-radius: 0 !important; mix-blend-mode: normal !important; margin-left: calc(-1 * var(--page-pad-inline)) !important; margin-right: calc(-1 * var(--page-pad-inline)) !important; } .chart-panel .chart-panel-header, .chart-panel .chart-selector, .chart-panel .country-row, .chart-panel .it-select-group, .chart-panel .m-chart-mode, .chart-panel .chart-notes { padding-left: var(--page-pad-inline) !important; padding-right: var(--page-pad-inline) !important; border-bottom: none !important; mix-blend-mode: normal !important; } /* Corpo del grafico: 10px a SINISTRA, 4px a DESTRA (richiesta utente: a destra era troppo staccato). Eccezione: "Debito pubblico" e "Saldi strutturali" mantengono 10px anche a destra. */ .chart-panel .chart-body { padding-left: 10px !important; padding-right: 4px !important; padding-top: 0 !important; mix-blend-mode: normal !important; } /* Debito/Saldi: il grafico ha gli STESSI margini sx/dx dei box/tabelle sottostanti (= var(--page-pad-inline)). Le label Y restano dentro al SVG, quindi mai tagliate; il plot si allarga fino al bordo destro come i box. */ body[data-page="debito"] .chart-panel .chart-body, body[data-page="saldi"] .chart-panel .chart-body { padding-left: var(--page-pad-inline) !important; padding-right: var(--page-pad-inline) !important; } .chart-notes { margin-top: 16px; } /* Footer: solo il margine superiore azzerato (gli altri restano). */ .brand-footer { margin-top: 0 !important; } /* Box dettaglio: altezza in base al contenuto (niente altezza fissa). */ .detail-body { min-height: 0 !important; } /* Header del pannello grafico: padding verticale compatto su mobile */ .chart-panel .chart-panel-header { padding-top: 0 !important; padding-bottom: 0 !important; } /* (Il respiro di 10px è ora fornito uniformemente da .chart-body sopra: #euroHost/#forecastHost non hanno più bisogno di padding extra.) */ /* RUE: "Anno + select" su riga propria (come PIL: selettori impilati). */ .m-anno-group { display: flex; flex-basis: 100%; align-items: center; gap: 12px; padding-top: 10px; } .m-anno-group .chart-selector-label.year-label { margin-left: 0 !important; } /* Hint "click su un anno": l'originale .chart-hint ("Passa il mouse…", aggiornato dalla pagina) è nascosto; la versione mobile va su riga propria, allineata a sinistra, con 10px di padding-top. */ .chart-hint { display: none !important; } .m-chart-hint { display: block; width: 100%; padding-top: 10px; text-align: left; font-family: var(--it-font-sans); font-size: 14px; font-weight: 400; font-style: italic; color: var(--it-color-gray-45); } /* ─── Selettori "Previsioni": SEMPRE su righe distinte ─────────────── Grid label+select: ogni coppia (Anno / Previsore) sulla propria riga. */ .it-select-group { display: grid !important; grid-template-columns: max-content 1fr; align-items: center; column-gap: 12px; row-gap: 12px; } /* Gruppo selettori "Confronto previsioni" dentro un pannello grafico: padding verticale 20px e row-gap 20px (richiesta utente). */ .chart-panel .it-select-group { padding-top: 20px !important; padding-bottom: 20px !important; row-gap: 20px !important; } .it-select { min-height: 44px; font-size: 15px; padding-top: 10px; padding-bottom: 10px; width: fit-content; } /* Niente rientro a sinistra sul 2° label (Previsore): in griglia non serve. */ .it-select-group .it-select + .it-select-label { margin-left: 0; } /* "Confronto Previsioni…" (PIL / Lavoro / Inflazione): su mobile il Previsore e il suo selettore vanno SOPRA l'Anno e il suo (richiesta utente). Solo riordino visivo via grid+order: il DOM (e quindi il desktop) resta invariato. La coppia è label+select; #forecastSelectors ha esattamente 2 label e 2 select (Anno=1°, Previsore=2°). */ #forecastSelectors > .it-select-label:nth-of-type(2) { order: 1; } #forecastSelectors > .it-select:nth-of-type(2) { order: 2; } #forecastSelectors > .it-select-label:nth-of-type(1) { order: 3; } #forecastSelectors > .it-select:nth-of-type(1) { order: 4; } /* ─── Modulo testo (commentary): largo 100%, non ristretto a destra ── */ .commentary-panel { padding-right: 0 !important; } /* Più respiro tra i blocchi (richiesta utente: gap 40px) */ .bottom-grid { gap: 40px !important; } .body-grid, .right-stack { gap: 40px !important; } .it-accordion-button { padding-top: 16px; padding-bottom: 16px; padding-right: 44px; } /* ─── Tabelle larghe: scroller con prima colonna bloccata ──────────── Niente sfumature laterali (richiesta utente): solo scroll + colonna fissa. */ .m-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .m-table-scroll thead th:first-child, .m-table-scroll tbody td:first-child { position: sticky; left: 0; z-index: 2; background: var(--it-color-white); box-shadow: 1px 0 0 var(--it-color-gray-90); } .m-table-scroll thead th:first-child { z-index: 3; } /* Tabelle delle PREVISIONI (.prev-table): la 1ª colonna sticky NON deve essere più chiara (era bianca) ma TRASPARENTE, così prende il beige di fondo del box. Escluse le pagine "Debito pubblico" e "Saldi strutturali" (richiesta utente): lì la .prev-table resta invariata e la tabella "Relazione tra indicatori" (.rel-table) conserva la colonna opaca che le serve per mascherare lo scroll orizzontale. */ body:not([data-page="debito"]):not([data-page="saldi"]) .m-table-scroll .prev-table thead th:first-child, body:not([data-page="debito"]):not([data-page="saldi"]) .m-table-scroll .prev-table tbody td:first-child { background: transparent; } /* Tabelle PREVISIONI a ≤3 colonne (classe .m-table-fit aggiunta da wrapTables, esclusi debito/saldi): resa IDENTICA al desktop/inspect. Sul telefono reale la colonna fissa (sticky) mostrava una linea verticale (box-shadow) e, con table-layout automatico + font Titillium più largo, comprimeva le colonne degli anni. Qui togliamo lo scroll/colonna fissa e forziamo colonne distribuite uniformemente. */ .m-table-scroll.m-table-fit { overflow-x: visible; } .m-table-scroll.m-table-fit thead th:first-child, .m-table-scroll.m-table-fit tbody td:first-child { position: static; box-shadow: none; background: transparent; } .m-table-scroll.m-table-fit .prev-table { table-layout: fixed; width: 100%; } /* Prima colonna (Previsore) ~ metà; le due colonne anno si dividono il resto. */ .m-table-scroll.m-table-fit .prev-table th:first-child, .m-table-scroll.m-table-fit .prev-table td:first-child { width: 55%; } /* Evita che etichette lunghe vadano a capo in modo brutto. */ .m-table-scroll.m-table-fit .prev-table td:first-child { overflow-wrap: anywhere; } /* ─── Card allegati: niente clamp d'altezza su mobile ──────────────── */ .it-card-attachments { max-height: none; } .it-card-attachments-desc { -webkit-line-clamp: unset; display: block; overflow: visible; } /* ─── Tooltip + menu: opacità piena, nessun blend (no trasparenze) ──── */ .dsi-tooltip { mix-blend-mode: normal !important; isolation: isolate; background-color: var(--it-color-white) !important; } /* Niente flash del rettangolo nero al tap su grafici/chip/zone interattive (tap highlight di iOS/Android). Lo azzeriamo sull'intera area grafico. */ .chart-host, .chart-host *, svg.dsi-chart, svg.dsi-chart *, .m-year-hit, .it-chip, .it-chip *, .it-content-switcher .cs-segment { -webkit-tap-highlight-color: transparent; } /* Menu dei selettori: sfondo BEIGE come .main (richiesta: niente bianco) */ .m-country-dd-menu { mix-blend-mode: normal !important; isolation: isolate; background-color: color-mix(in srgb, var(--it-color-orange-87) 50%, var(--it-color-white)) !important; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ B. TABLET 768–1024px — layout a 2 colonne ridotto ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (min-width: 768px) and (max-width: 1024px) { .kpi-row { grid-template-columns: repeat(2, 1fr) !important; } .bottom-grid { grid-template-columns: 1.4fr 1fr !important; } .body-grid { grid-template-columns: 1fr !important; } .right-stack { flex-direction: row; flex-wrap: wrap; } .right-stack > * { flex: 1 1 320px; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ C. TELEFONO ≤ 767px — colonna singola (phone-first) ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 767px) { .page { --page-pad-inline: clamp(12px, 3.5vw, 16px); } .kpi-row { grid-template-columns: 1fr !important; } .bottom-grid, .body-grid { grid-template-columns: 1fr !important; } .right-stack { gap: 40px; } .kpi-card { padding: 18px; } .kpi-value { font-size: 40px; } .chart-title { font-size: 18px; } .chart-subtitle { font-size: 13px; } .prev-table thead th, .prev-table tbody td { padding-left: 12px; padding-right: 12px; } .brand-footer .footer-legal { flex-direction: column; gap: 6px; } /* ─── KPI come CAROUSEL (Bootstrap Italia) su telefono ─────────────── Spec DSI: su mobile le frecce sono nascoste; restano swipe + indicatori di progresso. Una card per volta con "peek" della successiva. ───────── */ .kpi-row.m-carousel { display: flex !important; grid-template-columns: none !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; position: relative; margin-left: calc(-1 * var(--page-pad-inline)); margin-right: calc(-1 * var(--page-pad-inline)); padding: 10px var(--page-pad-inline) 4px; scroll-padding-left: var(--page-pad-inline); } .kpi-row.m-carousel::-webkit-scrollbar { display: none; } .kpi-row.m-carousel .kpi-card { flex: 0 0 84%; scroll-snap-align: start; display: flex !important; flex-direction: column; grid-row: auto !important; grid-template-rows: none !important; } /* Indicatori di progresso (dots) */ .m-kpi-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; } .m-kpi-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: var(--it-color-gray-83); cursor: pointer; transition: width 0.2s ease, background-color 0.2s ease; } .m-kpi-dot.active { width: 24px; background: var(--it-color-blue-20); } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ D. MEGAMENU MOBILE — pannello a scomparsa (Bootstrap Italia) ║ ║ Apertura dall'hamburger nella slim-header. Overlay + pannello ║ ║ vengono appesi al body da mobile.js. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { /* Overlay scuro */ .m-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 998; } .m-nav.is-open .m-nav-overlay { opacity: 1; visibility: visible; } /* Pannello da sinistra */ .m-nav-panel { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 360px); background: var(--it-color-white); z-index: 999; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: var(--it-elevation-high, 0 16px 48px rgba(0,0,0,.15)); overflow-y: auto; } .m-nav.is-open .m-nav-panel { transform: translateX(0); } /* Testata del pannello (navy istituzionale) */ .m-nav-panel-head { background: var(--it-color-blue-20); color: var(--it-color-white); padding: 14px 14px 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; } .m-nav-panel-title { font-family: var(--it-font-sans); font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--it-color-white); text-decoration: none; } a.m-nav-panel-title:hover { text-decoration: none; } .m-nav-close { appearance: none; -webkit-appearance: none; background: transparent; border: none; color: var(--it-color-white); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--it-radius-smooth, 4px); transition: background 0.15s ease; } .m-nav-close:hover { background: rgba(255,255,255,0.12); } .m-nav-close:focus-visible { outline: 0; outline-offset: 0; } .m-nav-close svg { width: 22px; height: 22px; display: block; } .m-nav-section { padding: 16px 20px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--it-color-gray-45); } .m-nav-list { list-style: none; margin: 0; padding: 0 0 16px; } .m-nav-list li { margin: 0; } .m-nav-link { display: flex; align-items: center; gap: 10px; padding: 14px 20px; min-height: 48px; font-family: var(--it-font-sans); font-size: 15px; font-weight: 600; color: var(--it-color-gray-15); text-decoration: none; border-left: 3px solid transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .m-nav-link:hover { background: var(--it-color-gray-96); color: var(--it-color-blue-40); } .m-nav-link.active { color: var(--it-color-blue-20); border-left-color: var(--it-color-blue-20); background: var(--it-color-blue-97); } .m-nav-link.active::after { content: ''; margin-left: auto; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } body.m-nav-locked { overflow: hidden; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ D-bis. COVER INDEX su mobile: illustrazione via, titolo + "Esplora" ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 767px) { /* COVER index su mobile: l'illustrazione "thumb" parte SUBITO sotto la slim-header e dev'essere INTERAMENTE visibile assieme al brand-footer, senza scroll. Per questo la .page riempie esattamente il viewport e il .cover prende lo spazio fra header e footer; l'immagine è contenuta in altezza (background-size: contain) su sfondo #faf1e3 (come desktop). */ body[data-page="index"] .page { height: 100vh; height: 100dvh; } body[data-page="index"] .cover { position: relative; flex: 1 1 auto; height: auto; min-height: 0; background-color: #faf1e3; background-image: url('ie-visual-mobile.webp') !important; background-repeat: no-repeat; background-position: center bottom; background-size: cover; display: block; overflow: hidden; } body[data-page="index"] .cover-content { position: absolute; inset: 0; height: auto; width: 100%; max-width: none; margin: 0; padding: 0; display: block; } body[data-page="index"] .cover-content > * { max-width: none; } /* COVER index su mobile — posizionamento ROBUSTO rispetto alla barra URL di iOS. L'illustrazione è ancorata in basso (background-position:center bottom) e scalata in larghezza, quindi la sua altezza renderizzata = 100vw / 0.4640 = 215.5vw, indipendentemente dall'altezza visibile del viewport. Ancorando titolo e bottone al FONDO con unità vw, restano "agganciati" agli stessi rettangoli della grafica anche quando la barra URL compare/scompare. • Banda vuota in alto (titolo): frazione immagine 0.424–0.535. • Bottone: subito sotto, sul beige libero (frazione ~0.56–0.61). */ body[data-page="index"] .cover-title { position: absolute; left: 50px; right: 20px; top: auto; bottom: calc((1 - 0.518) * 215.5vw); /* bordo inferiore titolo ≈ frazione 0.518 */ transform: none; margin: 0; color: var(--it-color-gray-10); font-size: clamp(26px, 7.4vw, 38px); line-height: 1.1; text-align: left; } body[data-page="index"] .cover-nav { display: none !important; } .m-cover-cta { position: absolute; left: 50px; top: auto; /* Bottone centrato ESATTAMENTE in verticale nella sua cella di griglia: linee a frazione 0.5348 e 0.6518 \u2192 centro 0.5933. translateY(50%) porta il CENTRO del bottone sulla linea, qualunque sia la sua altezza. */ bottom: calc((1 - 0.5933) * 215.5vw); transform: translateY(50%); display: inline-flex; align-items: center; gap: 10px; background: var(--it-color-blue-20); color: var(--it-color-white); font-family: var(--it-font-sans); font-weight: 600; font-size: 16px; text-decoration: none; padding: 13px 22px; min-height: 48px; border-radius: var(--it-radius-smooth, 4px); transition: background 0.15s ease; } .m-cover-cta svg { width: 20px; height: 20px; } .m-cover-cta:hover { background: var(--it-color-blue-20); } /* Sfondo BLU (come header e footer) dietro la barra del browser in basso e nelle safe-area: il body è la superficie che iOS campiona sotto la toolbar. */ html:has(body[data-page="index"]), body[data-page="index"] { background-color: var(--it-color-blue-20); } /* Header index: via il blocco "Aggiornamento" (spostato nel brand-footer). */ body[data-page="index"] .slim-header .slim-right { display: none !important; } /* Brand-footer dell'index visibile solo su mobile. */ body[data-page="index"] .brand-footer { display: block; flex: 0 0 auto; /* "Aggiornato a maggio 2026" allineato a sinistra col titolo e il bottone della cover (left: 50px); destra come il titolo (20px). */ padding-left: 50px; padding-right: 20px; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ E. DROPDOWN SELETTORE PAESI (iniettato da mobile.js) ║ ║ Dropdown a checklist in stile .it-select. Multi-selezione. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { /* Selettore COUNTRY (multi-select) → nasconde chip + label originali. Vale sia per .chart-selector sia per .country-row (Lavoro/Inflazione). */ .chart-selector.has-m-dd .chart-selector-btn, .chart-selector.has-m-dd .chart-selector-label, .country-row.has-m-dd .chart-selector-btn, .country-row.has-m-dd .chart-selector-label { display: none; } /* Selettore SINGLE (Indicatore / Anno / Mostra) → nasconde solo le chip; la label resta visibile e precede la tendina (es. "Indicatore [▾]"). */ .chart-selector.has-m-dd-single .chart-selector-btn, .country-row.has-m-dd-single .chart-selector-btn { display: none; } .m-country-dd { display: inline-block; position: relative; } /* STACKING: il gruppo-selettore va sopra il corpo del grafico (che su alcune pagine ha rect-trasparenti .m-year-hit con pointer-events:all). Senza questo, il tap su un'opzione della tendina cadeva sulla barra sottostante. Il selettore con tendina APERTA sale ulteriormente, così il suo menu copre anche eventuali selettori-fratelli sotto di esso (caso "doppio"). */ .chart-selector.has-m-dd, .chart-selector.has-m-dd-single, .country-row.has-m-dd, .country-row.has-m-dd-single { position: relative; z-index: 5; } .chart-selector:has(.m-country-dd.is-open), .country-row:has(.m-country-dd.is-open) { z-index: 60; } .m-country-dd.is-open { z-index: 60; } /* Selettori (trigger + menu): SEMPRE su sfondo BEIGE di .main, mai bianco. Il componente di riferimento è quello di "Confronto previsioni" (it-select): stesso sfondo beige in tutte le pagine e per tutti i selettori. */ .m-country-dd-trigger { background-color: color-mix(in srgb, var(--it-color-orange-87) 50%, var(--it-color-white)) !important; } .m-country-dd-menu { background-color: color-mix(in srgb, var(--it-color-orange-87) 50%, var(--it-color-white)) !important; opacity: 1 !important; mix-blend-mode: normal !important; } /* it-select (Anno / Previsore / Mostra…) coerente: sfondo beige, no blend */ .it-select { background-color: color-mix(in srgb, var(--it-color-orange-87) 50%, var(--it-color-white)) !important; mix-blend-mode: normal !important; } /* Valore corrente nel trigger della tendina single-select */ .m-select-dd .m-select-dd-value { font-family: var(--it-font-sans); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; } .m-country-dd-trigger { font-family: var(--it-font-sans); font-size: 15px; font-weight: 600; border: 1px solid var(--it-color-gray-83); background: transparent; color: var(--it-color-gray-25); padding: 10px 40px 10px 14px; border-radius: var(--it-radius-smooth, 4px); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } /* Trasparente di default, BIANCO solo all'interazione (hover/focus/aperto) */ .m-country-dd-trigger:hover, .m-country-dd-trigger:focus-visible, .m-country-dd.is-open .m-country-dd-trigger { background-color: var(--it-color-white); } .m-country-dd-trigger:hover { border-color: var(--it-color-teal-32); color: var(--it-color-teal-32); } .m-country-dd-trigger:focus-visible { outline: none; border-color: var(--it-color-blue-30); box-shadow: 0 0 0 3px rgba(0,77,153,0.18); } .m-country-dd-trigger .m-country-dd-count { font-family: var(--it-font-serif); font-feature-settings: "tnum" 1, "lnum" 1; font-weight: 600; background: var(--it-color-teal-32); color: var(--it-color-white); border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } .m-country-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--it-color-white); border: 1px solid var(--it-color-gray-83); border-radius: var(--it-radius-smooth, 4px); box-shadow: var(--it-elevation-medium, 0 8px 16px rgba(0,0,0,.10)); padding: 6px; z-index: 80; display: none; } .m-country-dd.is-open .m-country-dd-menu { display: block; } /* Flip orizzontale: menu ancorato a destra del trigger (apre verso sinistra) quando altrimenti uscirebbe dallo schermo. */ .m-country-dd.m-dd-right .m-country-dd-menu { left: auto; right: 0; } .m-country-dd-option { display: flex; align-items: center; gap: 10px; padding: 10px; min-height: 44px; border-radius: var(--it-radius-smooth, 4px); cursor: pointer; font-size: 15px; font-weight: 600; color: var(--it-color-gray-25); user-select: none; } .m-country-dd-option:hover { background: var(--it-color-gray-96); } .m-country-dd-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; } .m-country-dd-check { margin-left: auto; width: 18px; height: 18px; border: 1.5px solid var(--it-color-gray-64); border-radius: 3px; flex-shrink: 0; position: relative; } .m-country-dd-option[aria-checked="true"] .m-country-dd-check { background: var(--it-color-blue-20); border-color: var(--it-color-blue-20); } .m-country-dd-option[aria-checked="true"] .m-country-dd-check::after { content: ''; position: absolute; inset: 0; background-color: var(--it-color-white); -webkit-mask: url("data:image/svg+xml;utf8,") center / 14px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 14px no-repeat; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ E-bis. SELETTORE PAESI → CHIP CAROUSEL (Design System Italia) ║ ║ I bottoni-paese restano le chip desktop (.chart-selector-btn) ma ║ ║ scorrono in orizzontale su una sola riga (come il carousel KPI). ║ ║ Chip selezionata = X removibile. Stile identico al desktop. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* X removibile: nascosta di default (anche su desktop), visibile solo sulla chip attiva entro le @media mobile più sotto. */ .m-chip-x { display: none; } /* Su DESKTOP il wrapper delle chip si dissolve (display:contents): i bottoni tornano figli diretti di .chart-selector, ripristinando la riga orizzontale con wrap + gap originali. Su mobile (≤1024) diventa uno scroller (vedi sotto). */ .m-chip-scroll { display: contents; } @media (max-width: 1024px) { /* Riga-chip = BLOCCO: etichetta su riga propria (sopra), poi le chip in un contenitore che scorre in orizzontale. Così l'etichetta non viene mai tagliata e le chip partono dal padding del titolo. */ .chart-panel .chart-selector.m-chip-row { display: block !important; } .chart-panel .country-row.m-chip-row.visible { display: block !important; } .m-chip-row .chart-selector-label { display: block; min-width: 0 !important; margin: 0 0 8px 0 !important; } .m-chip-row .m-chip-scroll { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; } .m-chip-row .m-chip-scroll::-webkit-scrollbar { display: none; } /* I pannelli-grafico sono item di grid/flex: senza min-width:0 il loro contenuto (la riga-chip a scorrimento, nowrap) ne forza l'espansione oltre il viewport, "rompendo" la larghezza del grafico. */ .chart-panel { min-width: 0; } /* Chip: non si comprimono, snap a inizio */ .m-chip-row .chart-selector-btn { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; white-space: nowrap; } /* Chip Paese NON selezionata: sfondo TRASPARENTE (non bianco) così prende il beige del box, come da richiesta utente (IMG_5193). Sul telefono reale il mix-blend-mode:multiply non bastava (resa bianca). La chip attiva conserva la sua tinta piena. */ .m-chip-row .chart-selector-btn[data-country]:not(.active) { background: transparent !important; } /* X visibile solo sulla chip attiva (eredita il colore del testo: bianco) */ .m-chip-row .chart-selector-btn.active .m-chip-x { display: inline-block; width: 13px; height: 13px; flex-shrink: 0; margin: 0 -2px 0 1px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ F. TOGGLE VISUALIZZAZIONE GRAFICO (Adatta / Scorri) — valutazione ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { .m-chart-mode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; } .m-chart-mode-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--it-color-gray-45); } .m-seg { display: inline-flex; border: 1px solid var(--it-color-gray-83); border-radius: var(--it-radius-smooth, 4px); overflow: hidden; background: var(--it-color-white); } .m-seg-btn { appearance: none; -webkit-appearance: none; background: transparent; border: none; font-family: var(--it-font-sans); font-size: 13px; font-weight: 600; color: var(--it-color-gray-25); padding: 9px 16px; min-height: 40px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .m-seg-btn + .m-seg-btn { border-left: 1px solid var(--it-color-gray-83); } .m-seg-btn.active { background: var(--it-color-blue-20); color: var(--it-color-white); } /* Modalità "Scorri": l'host scorre orizzontalmente, SVG a larghezza minima. */ .chart-host.m-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .chart-host.m-scroll-wrap > svg { min-width: var(--m-scroll-min, 720px); } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ G. GRAFICI DENSI: niente etichette valore su mobile (solo tooltip) ║ ║ Host densi (esclusi: previsionali orizzontali, Spesa netta, e i ║ ║ grafici #ssbHost / #growthHost che — su richiesta utente — ║ ║ mostrano SEMPRE il valore sulle barre fino a 2 Paesi, come il ║ ║ bullet "Confronto traiettorie" di Spesa netta. La soglia 3+ Paesi ║ ║ è gestita in JS: con 3+ Paesi le label non vengono nemmeno create).║ ║ Il click-per-anno è gestito da mobile.js (motore generico). ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { #mainHost .bar-pct-label, #mainHost .point-label, #monthlyHost .bar-pct-label, #monthlyHost .point-label, #chartDebHost .bar-pct-label, #chartDebHost .point-label, #chartScompHost .bar-pct-label, #chartScompHost .point-label, #chartIndebHost .bar-pct-label, #chartIndebHost .point-label, #chartSaldoHost .bar-pct-label, #chartSaldoHost .point-label, #chartOgHost .bar-pct-label, #chartOgHost .point-label { display: none !important; } .m-year-hit { cursor: pointer; } /* Indebitamento · grafico "Entrate, Uscite, Indebitamento Netto" (#mainHost): le etichette del deficit al centro dell'area sono SENZA classe (solo style inline) → non venivano colpite dalla regola .bar-pct-label. Su mobile vanno nascoste: il valore resta nella tooltip (tap sulla colonna anno), come per tutti gli altri grafici. */ body[data-page="indebitamento"] #mainHost svg text:not([class]) { display: none !important; } /* Indebitamento · "Rapporto indebitamento netto (deficit) / PIL" (#deficitPilHost): su mobile NON si attiva la tooltip (richiesta utente). I valori restano visibili a destra (le .bar-pct-label NON sono nascoste e compaiono al termine dell'animazione delle barre, gestita da motion.js). Disabilitiamo i pointer-events sulle barre così il tap non apre il tooltip; #deficitPilHost è inoltre escluso dal motore "tap-anno" in mobile.js. */ body[data-page="indebitamento"] #deficitPilHost .bar { pointer-events: none !important; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ H. TIPOGRAFIA MOBILE RIMODULATA (≤1024px) ║ ║ Scala con PAVIMENTO a 14px (non tutto a 14): 14 = micro-etichette, ║ ║ 15 = testo corpo secondario, 16 = titoli di link/voce. Eccezione ║ ║ .section-label = 13px. !important per battere i clamp() di pagina. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { /* Eccezione esplicita */ .section-label { font-size: 13px !important; line-height: 1.3 !important; } /* "NOTA" all'inizio delle note del grafico: 13px (richiesta utente). */ .chart-notes strong { font-size: 13px !important; } /* ── Tier 1 · 14px — micro-etichette / eyebrow / meta / note / caption ── */ .slim-header, .slim-header .slim-right, .main-header .titles .eyebrow, .kpi-eyebrow, .chart-selector-label, .chart-selector-btn, .chart-hint, .chart-notes, .commentary-eyebrow, .it-card-attachments-eyebrow, .it-card-attachments-format, .it-card-attachments-link-meta, .it-card-related-title, .it-card-related-link-meta, .detail-year-label, .detail-click-hint, .breakdown-title, .breakdown-row-label, .breakdown-bar-value, .breakdown-nat, .cc-footer-card .cc-footer-label, .it-select-label, .prev-table thead th, .rel-table thead th, .debpil-table thead th, table.detail-table thead th, .brand-footer h4, .brand-footer .footer-source strong, .brand-footer .footer-legal, .cover-nav-group-label, .m-nav-section, .m-chart-mode-label, .m-seg-btn, .m-country-dd-count { font-size: 14px !important; } /* ── Tier 2 · 15px — testo di corpo secondario / dati / sottotitoli ──── */ .main-header .titles p, .kpi-fullname, .kpi-desc, .chart-subtitle, .legend-item, .legend-item .legend-label, .legend-item .legend-meta, .legend-group-label, .it-accordion-button, .it-card-attachments-desc, .glossary-content, .glossary-cell-text, .detail-header-sub, .detail-indicator-name, .debpil-header-sub, .compliance-header-sub, .prev-table tbody td, .rel-table tbody td, .debpil-table tbody td, table.detail-table tbody td, .brand-footer .footer-brand, .brand-footer .footer-source { font-size: 15px !important; } /* Tooltip dei grafici (mobile): testo 14px, interlinea 1.25 (richiesta utente) */ .dsi-tooltip .tt-title, .dsi-tooltip .tt-row { font-size: 14px !important; line-height: 1.25 !important; } /* Il dato a destra DEVE essere sempre allineato a destra (niente spazio che lo stacca dal bordo): la chiave occupa lo spazio disponibile, il valore viene spinto a filo destro e allineato a destra anche se va a capo. */ .dsi-tooltip .tt-row { gap: 16px !important; } .dsi-tooltip .tt-key { flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; } .dsi-tooltip .tt-val { margin-left: auto !important; text-align: right !important; flex: 0 0 auto !important; } /* Più respiro fra TUTTE le righe della tooltip (era 4px). */ .dsi-tooltip .tt-row + .tt-row { margin-top: 10px !important; } /* ── Tier 3 · 16px — titoli di voce / link / titolo grafico ──────────── */ .it-card-attachments-link-title, .it-card-related-link-title, .glossary-cell-title { font-size: 16px !important; } /* Titolo dei pannelli GRAFICO e TABELLA (.chart-title) + intestazione del pannello dettaglio (.detail-header-text, identica al titolo grafico): 18px su mobile, tutte le pagine (richiesta utente). */ .chart-title, .detail-header-text { font-size: 18px !important; } /* I font dei testi SVG (tick degli assi + titoli asse) sono normalizzati a dimensione VISIVA costante da mobile.js → normalizeChartFonts(): 13px sui tick non-ordinata e sui titoli asse, 12px dentro la modale, ordinate invariate. Nessuna regola CSS qui: a viewBox diversi la stessa misura in px renderebbe dimensioni diverse sullo schermo. */ } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ I. MODALE DI DETTAGLIO (≤1024px) — Inflazione / Mercato del lavoro ║ ║ Riproduce il pannello #detailBody desktop al tap su un anno. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { .m-detail-modal { position: fixed; inset: 0; z-index: 1000; display: none; } .m-detail-modal.is-open { display: block; } .m-detail-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); } .m-detail-modal-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 28px); max-width: 480px; max-height: 86vh; background: var(--it-color-white); border-radius: var(--it-radius-smooth, 4px); box-shadow: var(--it-elevation-high, 0 16px 48px rgba(0,0,0,.15)); display: flex; flex-direction: column; overflow: hidden; } .m-detail-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--it-color-gray-90); flex-shrink: 0; } .m-detail-modal-title { font-family: var(--it-font-sans); font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--it-color-gray-10); } .m-detail-modal-close { appearance: none; -webkit-appearance: none; background: transparent; border: none; color: var(--it-color-gray-25); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--it-radius-smooth, 4px); padding: 8px; transition: background 0.15s ease; } .m-detail-modal-close:hover { background: var(--it-color-gray-96); } .m-detail-modal-close:focus-visible { outline: none; } .m-detail-modal-close svg { width: 22px; height: 22px; display: block; } .m-detail-modal-body { padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Footer "stepper anni": consente di passare all'anno precedente/successivo senza chiudere la modale (richiesta utente). Solo barra di progresso che riflette la posizione dell'anno nella serie + pulsanti Indietro/Avanti. */ .m-detail-modal-foot { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--it-color-gray-90); flex-shrink: 0; } .m-detail-modal-foot[hidden] { display: none; } .m-step-btn { appearance: none; -webkit-appearance: none; background: var(--it-color-white); /* iOS Safari: il bordo è reso con box-shadow inset invece di `border` per evitare la "cucitura" grigia (1px) che iOS disegna a metà del box quando un elemento con border + border-radius + transition viene promosso a layer GPU. */ border: 0; box-shadow: inset 0 0 0 1px var(--it-color-blue-20); color: var(--it-color-blue-20); width: 44px; height: 44px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--it-radius-smooth, 4px); -webkit-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .m-step-btn:hover { background: var(--it-color-blue-20); color: var(--it-color-white); } .m-step-btn:active { background: var(--it-color-blue-20); color: var(--it-color-white); } .m-step-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--it-color-blue-20), 0 0 0 2px var(--it-color-white), 0 0 0 4px var(--it-color-blue-40); } .m-step-btn svg { width: 22px; height: 22px; display: block; } .m-step-btn:disabled { box-shadow: inset 0 0 0 1px var(--it-color-gray-90); color: var(--it-color-gray-83); cursor: default; opacity: 0.7; } .m-step-btn:disabled:hover { background: var(--it-color-white); color: var(--it-color-gray-83); } .m-step-progress { flex: 1 1 auto; height: 5px; background: var(--it-color-gray-90); border-radius: 999px; overflow: hidden; } .m-step-progress-fill { height: 100%; width: 0%; background: var(--it-color-blue-20); border-radius: 999px; transition: width 0.25s ease; } /* Annulla l'eventuale blend/sfondo ereditato dal .detail-body desktop; nella modale il padding-bottom dev'essere 0 (non 16px). */ .m-detail-modal-content { mix-blend-mode: normal; background: transparent; padding-bottom: 0 !important; } /* Inflazione · modale "Confronto tra Paesi" (1+ Paesi oltre l'Italia): ritocchi di spaziatura del confronto (richiesta utente). */ .m-detail-modal-content:has(.breakdown-section) { padding: 14px 18px !important; } .m-detail-modal .breakdown-row { margin-bottom: 12px; } .m-detail-modal .breakdown-row-label { text-align: left; width: 78px; } .m-detail-modal .breakdown-bar-value { width: 36px; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ J. TABELLA "Relazione tra indicatori" (Saldi strutturali / Debito) ║ ║ Il .rel-panel è in mix-blend-mode:multiply → la prima colonna ║ ║ sticky (bianca) diventa trasparente e il testo si confonde con le ║ ║ colonne che ci scorrono sotto. Su mobile: pannello + prima colonna ║ ║ OPACHI, prima colonna a larghezza del testo (nowrap). ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { .rel-panel { mix-blend-mode: normal !important; } /* Tabella a larghezza del CONTENUTO (no stretch): la 1ª colonna prende ESATTAMENTE la larghezza del testo più lungo (es. "Variazione totale (1+2+3)" / "(4) Indebitamento netto strutt. (1−2−3)"), non lo spazio residuo. Annulla la min-width imposta da wrapTables. */ .m-table-scroll .rel-table { table-layout: auto !important; width: max-content !important; min-width: 0 !important; max-width: none !important; } .rel-table colgroup col.col-label { width: auto !important; } .rel-table colgroup col.col-year { min-width: 0 !important; } .m-table-scroll .rel-table thead th:first-child, .m-table-scroll .rel-table tbody td:first-child { mix-blend-mode: normal !important; /* Stesso beige del box (.rel-panel su mobile = orange-87 20% sopra il beige di pagina al 50% → equivale a orange-87 60% su bianco). */ background-color: color-mix(in srgb, var(--it-color-orange-87) 45%, var(--it-color-white)) !important; white-space: nowrap !important; width: 1px !important; } /* Testo 1ª colonna a 14px (non 15) → entrano più colonne a destra. */ .m-table-scroll .rel-table tbody td:first-child { font-size: 14px !important; } /* La riga "derivata" (evidenziata, es. Variazione totale / Indeb. netto strutt.) aveva position:relative sulla 1ª cella → scorreva insieme ai dati. La rendiamo sticky come tutte le altre righe. */ .m-table-scroll .rel-table tbody tr.derived td:first-child { position: sticky !important; left: 0 !important; z-index: 2 !important; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ K. INFLAZIONE — box dettaglio rimosso + selettori su una riga ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { /* Box "Dettaglio" Serie storica: visibile SOLO con paesi selezionati (IPCA); contiene solo il confronto tra stati (il valore % dell'anno è nella modale). */ body[data-page="inflazione"].m-detail-hidden .detail-panel:has(#detailBody) { display: none !important; } body[data-page="inflazione"] .detail-panel:has(#detailBody) .detail-header-sub, body[data-page="inflazione"] .detail-panel:has(#detailBody) .detail-year-label, body[data-page="inflazione"] .detail-panel:has(#detailBody) .detail-year-value, body[data-page="inflazione"] .detail-panel:has(#detailBody) .detail-indicator-name, body[data-page="inflazione"] .detail-panel:has(#detailBody) .detail-click-hint { display: none !important; } /* Indicatore + Paesi sulla stessa riga; hint "click su un anno" sotto. */ body[data-page="inflazione"] .m-infl-selectors { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 10px var(--page-pad-inline) 0; } body[data-page="inflazione"] .m-infl-selectors > .chart-selector, body[data-page="inflazione"] .m-infl-selectors > .country-row { padding: 0 !important; width: auto; } /* Le chip "Confronto paesi" occupano una RIGA INTERA (sotto "Indicatore"), mai a fianco di altri controlli. min-width:0 → la riga a scorrimento non allarga il pannello/grafico oltre il viewport. */ body[data-page="inflazione"] .m-infl-selectors > .country-row.m-chip-row { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; margin-top: 2px; } body[data-page="inflazione"] .m-infl-selectors { min-width: 0; max-width: 100%; } body[data-page="inflazione"] .m-infl-selectors .m-chart-hint { width: 100%; padding-top: 4px; } /* Valore % dell'anno mostrato nella modale, sopra "Andamento mensile". */ .m-detail-modal .m-year-summary { padding: 4px 0 12px; border-bottom: 1px solid var(--it-color-gray-90); margin-bottom: 14px; } /* Gap ridotto SOLO tra il grafico (.chart-panel) e il box "Dettaglio" (.detail-panel): la body-grid contiene esattamente questi due. */ body[data-page="inflazione"] .body-grid { gap: 16px !important; } /* Legenda paesi IPCA "Serie storica": su mobile va TOLTA — i colori sono già dati dalle chip "Confronto paesi" (richiesta utente). Resta invariata in stampa (print.css, media=print, >1024px non tocca queste regole). */ body[data-page="inflazione"] #mainPrintLegend { display: none !important; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ L. MERCATO DEL LAVORO — box dettaglio solo per "Disoccupazione" ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { body[data-page="lavoro"].m-detail-hidden .detail-panel:has(#detailBody) { display: none !important; } /* Il box "Dettaglio" (Disoccupazione) mostra SOLO i dati di confronto tra paesi: via il valore % dell'anno (è nella modale), via header-sub e hint. */ body[data-page="lavoro"] .detail-panel:has(#detailBody) .detail-header-sub, body[data-page="lavoro"] .detail-panel:has(#detailBody) .detail-year-label, body[data-page="lavoro"] .detail-panel:has(#detailBody) .detail-year-value, body[data-page="lavoro"] .detail-panel:has(#detailBody) .detail-indicator-name, body[data-page="lavoro"] .detail-panel:has(#detailBody) .detail-click-hint { display: none !important; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ M. RUE — ordine invertito: grafico "Tasso di occupazione" sopra il ║ ║ glossario (su mobile, colonna singola). ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { body[data-page="rue"] .bottom-grid { display: flex !important; flex-direction: column-reverse; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ N. SPESA NETTA — legenda in alto, axis-title nascosto, cc-grid ║ ║ come carousel (identico a .kpi-row.m-carousel). ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { /* S4 · "Confronto traiettorie": niente titoli d'asse */ body[data-page="spesa"] #tendenzialeHost .axis-title { display: none !important; } /* La linea dello zero deve essere IDENTICA alle linee griglia (non più scura): così le label dei valori non si confondono con essa. */ body[data-page="spesa"] .dsi-chart .axis-zero-line { stroke: var(--it-color-gray-90) !important; stroke-width: 1 !important; } /* S3 · legenda spostata sopra il grafico (sotto il selettore "Mostra"): niente bordo/margine superiore da "legenda sotto-grafico". */ body[data-page="spesa"] .chart-panel > .chart-legend-row { margin-top: 0; padding: 8px var(--page-pad-inline) 4px; border-top: none; } } @media (max-width: 767px) { /* S5 · Monitoraggio: .cc-grid diventa carousel come le KPI card */ body[data-page="spesa"] .cc-grid.m-carousel { display: flex !important; grid-template-columns: none !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; margin-left: calc(-1 * var(--page-pad-inline)); margin-right: calc(-1 * var(--page-pad-inline)); padding: 10px var(--page-pad-inline) 4px; scroll-padding-left: var(--page-pad-inline); } body[data-page="spesa"] .cc-grid.m-carousel::-webkit-scrollbar { display: none; } body[data-page="spesa"] .cc-grid.m-carousel .cc-card { flex: 0 0 72%; scroll-snap-align: start; } /* La footer-card "Limiti di deviazione" è spostata SOPRA le card (order:-1): resa come .kpi-desc, fuori dal carousel, blocco intero a tutta larghezza. */ body[data-page="spesa"] .compliance-body > .cc-footer-card { margin: 0; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ O. TIPOGRAFIA — ritocchi puntuali (≤1024px) ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { /* Note glossario */ .glossary-note { font-size: 13px !important; line-height: 1.35 !important; } /* Accordion */ .it-accordion-button { font-size: 17px !important; } .it-accordion-body { font-size: 15px !important; line-height: 1.4 !important; } /* Card allegati (Dossier) */ .it-card-attachments-title { font-size: 18px !important; } .it-card-attachments-desc { font-size: 15px !important; } /* SPESA NETTA — "Limiti di deviazione": reso come .kpi-desc (15px), label inline a inizio paragrafo, dimensione uniforme label+testo. */ body[data-page="spesa"] .compliance-header-text { font-size: 16px !important; } body[data-page="spesa"] .cc-footer-card { font-size: 15px !important; } body[data-page="spesa"] .cc-footer-card .cc-footer-label { font-size: 15px !important; text-align: left !important; } body[data-page="spesa"] .cc-footer-card .cc-footer-text { font-size: 15px !important; } /* SPESA NETTA — più respiro tra i 4 blocchi grafici (richiesta utente: 40px): i due grafici impilati (.chart-grid), il box "Monitoraggio" (.compliance-panel) e il modulo "Confronto traiettorie Area Euro" (.bullet-module). */ body[data-page="spesa"] .chart-grid { gap: 40px !important; } body[data-page="spesa"] .compliance-panel { margin-top: 40px !important; } body[data-page="spesa"] .bullet-module { margin-top: 40px !important; } /* PIL — "Tasso di crescita…": via la legenda (bastano le chip); l'etichetta "Paesi" è già sopra le chip (vedi sezione E-bis). */ body[data-page="pil"] #growthLegend { display: none !important; } /* RUE — "Andamento degli indicatori…": via la legenda (bastano le chip), come per "Disoccupazione" nel mercato del lavoro. */ body[data-page="rue"] #ssbLegend { display: none !important; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ SPESA NETTA — Modulo "Confronto traiettorie Paesi Area Euro" (mobile) ║ ║ Regole SCOPED al solo #bulletModule / #bulletCountrySelector. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 1024px) { /* "Mostra" (switcher) e "Paesi": più spazio verticale tra i due gruppi */ #bulletCountrySelector .bullet-switcher { align-items: center; margin-bottom: 18px; } /* "Mostra" allineato al centro rispetto al content-switcher (annulla il display:block + margin del pattern .m-chip-row) */ #bulletCountrySelector .bullet-switcher .chart-selector-label { display: inline-flex !important; align-items: center; margin: 0 12px 0 0 !important; } /* Content-switcher in stile tendina: niente sfondo bianco né contorno verde; solo il segmento selezionato è verde. */ #bulletCountrySelector .it-content-switcher { border: 1px solid var(--it-color-slate-78); border-radius: 4px; overflow: hidden; background-color: color-mix(in srgb, var(--it-color-orange-87) 50%, var(--it-color-white)); } #bulletCountrySelector .it-content-switcher .cs-segment { background: transparent; color: var(--it-color-gray-25); font-size: 14px; } #bulletCountrySelector .it-content-switcher .cs-segment + .cs-segment { border-left: 1px solid var(--it-color-slate-78); } #bulletCountrySelector .it-content-switcher .cs-segment.active { background: var(--it-color-teal-32); color: var(--it-color-white); } /* spazio (≥20px) tra la riga filtri e la legenda; frasi una sotto l'altra */ #bulletModule .bullet-encoding { margin-top: 20px; font-size: 13px; flex-direction: column; gap: 6px; } #bulletModule .bullet-block-title { font-size: 15px; } #bulletModule .bullet-block-sub { font-size: 13px; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ GLOBALE — tutte le pagine, tutti i viewport (solo schermo) ║ ║ In coda al file: vince per ordine di sorgente anche sui tier ≤1024px ║ ║ qui sopra e sugli