/* ═══════════════════════════════════════════════════════════════════ Misurazioni — redesign 2a (righe comparative + rail report/analisi) Collegare DOPO css/misurazioni.css. Usa solo variabili di theme.css. Layout scoped su .measurements-grid--redesign (aggiunta dal patch HTML). ═══════════════════════════════════════════════════════════════════ */ /* ── palette per modulo ──────────────────────────────────────────────── Il modulo attivo è segnalato da body.mode-training (js/main.js); nutrition è l'assenza della classe. Tutto il redesign usa var(--mr-accent*) invece di --primary* diretto, così basta ridefinire queste quattro variabili. La scala verde --brand-* di theme.css è speculare a --primary-* ed è già dichiarata sia in :root sia in .dark-mode: usandola la palette segue da sola anche il tema chiaro/scuro, senza colori hardcodati qui. NB: .dark-mode sta su , mode-training su . ────────────── */ #measurements-tab { --mr-accent: var(--primary); --mr-accent-dark: var(--primary-dark); --mr-accent-bg: var(--primary-bg); --mr-accent-border: var(--primary-border); /* pannello pieno (composizione corporea APC): già light/dark aware */ --mr-panel-bg: var(--analysis-full-bg); } body.mode-training #measurements-tab { --mr-accent: var(--brand); --mr-accent-dark: var(--brand-dark); --mr-accent-bg: var(--brand-bg); --mr-accent-border: var(--brand-border); /* --brand → --brand-dark (non --brand-light): il pannello ha testo bianco forzato da .apc-gradient-section, e questa coppia tiene lo stesso contrasto del gradiente viola di nutrition */ --mr-panel-bg: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); } /* in dark il pannello pieno è una velatura, non un gradiente pieno: va rifatto anche per training, altrimenti stacca dal resto del tema */ .dark-mode body.mode-training #measurements-tab { --mr-panel-bg: var(--brand-bg); } /* ── intestazione del tab ──────────────────────────────────────────── */ .mr-tabhead { margin: 0 0 16px; } .mr-tabhead-title { margin: 0; font-size: 26px; font-weight: 800; color: var(--text-heading); } .mr-tabhead-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--text-secondary); } /* ── layout: colonna principale + rail ─────────────────────────────── */ .measurements-grid--redesign { display: grid !important; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: none !important; gap: 16px; align-items: start; } .measurements-grid--redesign .mr-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .measurements-grid--redesign .mr-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; } @media (max-width: 1100px) { .measurements-grid--redesign { grid-template-columns: 1fr; } .measurements-grid--redesign .mr-rail { position: static; } } /* le sezioni esistenti dentro mr-main perdono i margini legacy */ .measurements-grid--redesign .mr-main > .section, .measurements-grid--redesign .mr-main > .fabbisogno-section { margin: 0; } /* ── barra data + confronto (in testa a ogni card) ─────────────────── */ .mr-cardbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-surface-card); } .mr-cardbar .meas-date-selector { display: flex; align-items: center; gap: 6px; margin: 0; } .mr-modebar {margin-bottom: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mr-modebar-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .mr-mode-group { display: inline-flex; overflow: hidden; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-surface); } .mr-mode-btn { padding: 5px 13px; font-size: 12px; font-weight: 600; font-family: inherit; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; } .mr-mode-btn:hover { background: var(--bg-hover); } .mr-mode-btn.active { background: var(--mr-accent); color: #fff; font-weight: 700; } .mr-mode-range, .mr-mode-cur { font-size: 12px; color: var(--text-secondary); } .mr-mode-range b, .mr-mode-cur { color: var(--text-heading); } .mr-from-select { padding: 3px 8px; font-size: 11.5px; font-weight: 600; font-family: inherit; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-input); color: var(--text-heading); } /* ── righe misure ──────────────────────────────────────────────────── */ .mr-rows { border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; background: var(--bg-surface); } /* 9 colonne — vedi MR_HEAD/valCells in misurazioni-redesign.js. La colonna "Valore" ospita le misure senza lato; Sx/Dx restano vuote (·) su quelle righe e viceversa, così le due famiglie non si confondono. */ .mr-row, .mr-rowhead { display: grid; grid-template-columns: minmax(150px, 1.4fr) 58px 58px 64px 82px 64px 56px 56px 26px; align-items: center; gap: 10px; padding: 9px 14px; } .mr-rowhead { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); background: var(--bg-surface-card); } /* Titolo e valori centrati (non a destra): allineati a destra condividono il bordo destro ma non l'asse, perché header e valore hanno corpi e lunghezze diverse — e il pill Δ aggiunge 8px di padding interno. Centrando entrambi l'allineamento non dipende più dalla larghezza del contenuto. */ .mr-rowhead span:nth-child(n+2) { text-align: center; } .mr-row { border-bottom: 1px solid var(--border-lightest); font-size: 13.5px; cursor: pointer; user-select: none; } .mr-row:last-child { border-bottom: none; } .mr-row:hover { background: var(--bg-hover); } .mr-row .mr-lb { font-weight: 600; color: var(--text-heading); display: flex; align-items: center; gap: 6px; min-width: 0; } .mr-row .mr-lb .mr-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr-row .mr-v { text-align: center; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; } .mr-row .mr-v--sx { color: var(--text-muted); font-weight: 600; } /* colonna non pertinente per questa misura (bilaterale vs singola): il punto deve sparire visivamente, non compete con i numeri */ .mr-row .mr-v--na { color: var(--border-light); font-weight: 400; } .mr-row .mr-mm { text-align: center; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; } .mr-row .mr-r { text-align: center; } /* La riga a 9 colonne chiede ~660px: sotto questa soglia (rail già impilato, quindi è la viewport a stringere) le colonne tornano compatte invece di sfondare orizzontalmente. */ @media (max-width: 820px) { .mr-row, .mr-rowhead { grid-template-columns: minmax(104px, 1.2fr) 46px 46px 52px 70px 54px 44px 44px 22px; gap: 6px; padding: 8px 10px; } .mr-row { font-size: 12.5px; } .measurements-grid--redesign .mr-rows .mr-row.plico-result-item, .measurements-grid--redesign .mr-rows .mr-row.antropo-result-item { padding: 8px 10px; } .mr-zone { padding: 6px 10px; } } /* selezione (contratto plica-selected / misura-deselected invariato) */ .mr-row .mr-ck { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; border: 1.5px solid var(--text-muted); display: inline-grid; place-items: center; font-size: 10px; line-height: 1; color: #fff; } .mr-row.plica-selected .mr-ck, .mr-row.misura-selected .mr-ck { background: var(--mr-accent); border-color: var(--mr-accent); } .mr-row.plica-selected .mr-ck::after, .mr-row.misura-selected .mr-ck::after { content: '✓'; } .mr-row.plica-deselected, .mr-row.misura-deselected { opacity: .45; } .mr-row.mr-novalue { opacity: .38; cursor: default; } /* zone anatomiche */ .mr-zone { display: flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); background: var(--bg-hover); border-left: 3px solid var(--mr-accent-border); border-bottom: 1px solid var(--border-lightest); } .mr-zone--custom { color: var(--warning-dark); border-left-color: var(--warning); } .mr-row.mr-custom { background: var(--warning-bg-lightest); } .mr-pin { display: inline-flex; padding: 0 6px; border-radius: 99px; flex-shrink: 0; font-size: 9px; font-weight: 800; background: var(--warning-bg); color: var(--warning-dark); border: 1px solid var(--warning-border); } .mr-row.mr-asym { background: var(--warning-bg-lightest); } .mr-asym-flag { color: var(--warning); flex-shrink: 0; } /* delta / percentuale / trend */ .mr-dlt { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .mr-dlt--good { background: var(--success-bg); color: var(--success-dark); } .mr-dlt--bad { background: var(--danger-bg); color: var(--danger-dark); } .mr-dlt--flat { background: var(--bg-hover); color: var(--text-muted); } .mr-pct--good { color: var(--success-dark); font-weight: 800; } .mr-pct--bad { color: var(--danger-dark); font-weight: 800; } .mr-pct--flat { color: var(--text-muted); font-weight: 600; } .mr-trend { font-weight: 900; } /* sotto-titolo blocco Diametri dentro la card antropometria */ .mr-subhead { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 13.5px; font-weight: 800; color: var(--text-heading); } .mr-subhead .mr-subhead-hint { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } /* kpi peso/bmi sotto le pliche */ .mr-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .mr-kpi { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border-light); background: var(--bg-surface-card); font-size: 12px; color: var(--text-secondary); cursor: default; } .mr-kpi b { font-size: 14px; color: var(--text-heading); font-variant-numeric: tabular-nums; } /* ── rail: card export ─────────────────────────────────────────────── */ .mr-rail-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 12px; padding: 14px; } .mr-rail-title { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 10px; } .mr-exbtns { display: flex; flex-direction: column; gap: 9px; } .mr-exbtn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border-light); background: var(--bg-surface); cursor: pointer; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .mr-exbtn:hover { border-color: var(--mr-accent); box-shadow: 0 2px 10px rgba(0,0,0,.08); } .mr-exbtn .mr-exbtn-ic { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: var(--mr-accent-bg); border: 1px solid var(--mr-accent); } .mr-exbtn .mr-exbtn-ic img { width: 18px; height: 18px; } .mr-exbtn .mr-exbtn-t { font-size: 12.5px; font-weight: 800; color: var(--text-heading); } .mr-exbtn .mr-exbtn-d { font-size: 11px; color: var(--text-secondary); margin-top: 1px; } /* pannello analisi misure nel rail (riusa gli id/classi esistenti) */ .mr-rail .antropo-analysis-panel { margin: 0; } /* storico peso nel rail: compatta card e tabella esistenti */ .mr-rail .weight-history-section { margin: 0; } .mr-rail .weight-history-chart-wrap { max-height: 180px; } .mr-rail .bia-history-table { font-size: 12px; } .mr-rail .bia-history-table th, .mr-rail .bia-history-table td { padding: 6px 8px; } /* ── azioni card più compatte (bottoni esistenti) ──────────────────── */ .measurements-grid--redesign .text-center-mt20 { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-top: 14px; text-align: left; } .measurements-grid--redesign .text-center-mt20 .btn { margin: 0; } /* Bottoni "Nuova Misurazione" (.btn-primary) e "Progressi" (.btn-tertiary): in btn.css sono agganciati a colori fissi — --brand (verde) il primo, --violet il secondo — quindi non seguono il modulo. Qui la sorgente del colore diventa --mr-accent, mantenendo identiche le formule color-mix di btn.css: cambia la tinta, non il peso visivo (primary resta a fondo tinto, tertiary resta outline). NB: btn.css è linkato DOPO questo file, servono selettori con l'id (1,1,0 / 1,2,0) per vincere su .btn-primary / .btn-primary:hover. In nutrition --violet coincide con --primary: lì il tertiary non cambia. */ #measurements-tab .btn-primary { background: color-mix(in srgb, var(--mr-accent) 15%, var(--bg-surface)); color: var(--mr-accent); border-color: color-mix(in srgb, var(--mr-accent) 38%, transparent); } #measurements-tab .btn-primary:hover { background: color-mix(in srgb, var(--mr-accent) 24%, var(--bg-surface)); border-color: var(--mr-accent); } #measurements-tab .btn-tertiary { color: var(--mr-accent); border-color: color-mix(in srgb, var(--mr-accent) 45%, transparent); } #measurements-tab .btn-tertiary:hover { background: color-mix(in srgb, var(--mr-accent) 12%, transparent); } /* ═══════════════════════════════════════════════════════════════════ Neutralizzazione del layout legacy "a piastrelle". Le righe conservano le classi del contratto DOM (.plico-results / .plico-result-item / .antropo-*), che in misurazioni.css portano però una griglia auto-fit + tasselli centrati: qui la disinnescano. Da eliminare insieme alle regole legacy in fase di pulizia. ═══════════════════════════════════════════════════════════════════ */ /* il contenitore torna a impilare le righe (era grid auto-fit) */ .measurements-grid--redesign .mr-rows.plico-results, .measurements-grid--redesign .mr-rows.antropo-results { display: block; grid-template-columns: none; gap: 0; margin-bottom: 0; } /* la riga perde tassello, centratura e transform legacy */ .measurements-grid--redesign .mr-rows .mr-row.plico-result-item, .measurements-grid--redesign .mr-rows .mr-row.antropo-result-item { padding: 9px 14px; /* tenere allineato a .mr-row */ text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border-lightest); border-radius: 0; transform: none; filter: none; box-shadow: none; animation: none; cursor: pointer; } .measurements-grid--redesign .mr-rows .mr-row:last-child { border-bottom: 0; } .measurements-grid--redesign .mr-rows .mr-row.plico-result-item:hover, .measurements-grid--redesign .mr-rows .mr-row.antropo-result-item:hover { transform: none; box-shadow: none; background: var(--bg-hover); } /* stati selezione: solo opacità, niente scale/grayscale legacy */ .measurements-grid--redesign .mr-rows .mr-row.plica-selected, .measurements-grid--redesign .mr-rows .mr-row.misura-selected { opacity: 1; transform: none; } .measurements-grid--redesign .mr-rows .mr-row.plica-deselected, .measurements-grid--redesign .mr-rows .mr-row.misura-deselected { opacity: .45; transform: none; filter: none; } /* custom e asimmetria riprendono la tinta ambra dopo la neutralizzazione */ .measurements-grid--redesign .mr-rows .mr-row.mr-custom, .measurements-grid--redesign .mr-rows .mr-row.mr-asym { background: var(--warning-bg-lightest); } /* ── header card: titolo + unità + badge ───────────────────────────── */ .measurements-grid--redesign .mr-cardtitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } .measurements-grid--redesign .mr-unit { font-size: .78em; font-weight: 600; color: var(--text-muted); } .mr-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; } .mr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; line-height: 1.5; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-light); } .mr-badge--bf { background: var(--success-bg); color: var(--success-dark); border-color: var(--success-border); } .mr-badge--vf, .mr-badge--idx { background: var(--mr-accent-bg); color: var(--mr-accent); border-color: var(--mr-accent-border); } .mr-badge--warn { background: var(--warning-bg); color: var(--warning-dark); border-color: var(--warning-border); } /* selettore Data dentro la modebar */ .mr-modebar .meas-date-select { padding: 3px 8px; font-size: 11.5px; font-weight: 700; font-family: inherit; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-input); color: var(--text-heading); } .mr-modebar .meas-date-select, .mr-modebar .mr-from-select { flex: 0 1 auto; width: auto; min-width: 7.5rem; max-width: min(100%, 12rem); background: var(--bg-input); color: var(--text-primary); border-color: var(--border-input); } .dark-mode .mr-modebar .meas-date-select option, .dark-mode .mr-modebar .mr-from-select option { background: var(--bg-surface-raised); color: var(--text-primary); } .mr-modebar-label--data { margin-left: 6px; } /* ── piè di card pliche: metodo BF + salva ─────────────────────────── */ .mr-cardfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-surface-card); } .mr-methods { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mr-methods-lb { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-right: 2px; } .measurements-grid--redesign .mr-methods .formula-btn { width: auto; margin: 0; padding: 4px 10px; font-size: 11.5px; font-weight: 700; font-family: inherit; border: 1px solid var(--border-light); border-radius: 99px; background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; } .measurements-grid--redesign .mr-methods .formula-btn:hover { border-color: var(--mr-accent); } .measurements-grid--redesign .mr-methods .formula-btn.formula-btn-active { background: var(--mr-accent); border-color: var(--mr-accent); color: #fff; } .measurements-grid--redesign .mr-methods .formula-btn.btn-plica-disabled { opacity: .4; } .mr-savebtn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700; border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-heading); } .mr-savebtn:hover { border-color: var(--mr-accent); } .mr-savebtn--block { width: 100%; margin: 10px 0 0; justify-content: center; } /* ── rail: hero body fat ─────────────────────────────────────────────── Il risultato della formula è il dato per cui si fa la plicometria: sta in cima alla card, non in una tile fra le altre. #calculated-fat resta l'id che scrive updateDisplayBodyFat. */ .mr-bf-hero { padding: 12px 13px 11px; margin-bottom: 12px; border-radius: 11px; border: 1px solid var(--mr-accent-border); background: var(--mr-accent-bg); } .mr-bf-top { display: flex; align-items: center; gap: 8px; } .mr-bf-lb { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); } .mr-bf-formula { margin-left: auto; padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; background: var(--bg-surface); color: var(--mr-accent); border: 1px solid var(--mr-accent-border); } .mr-bf-formula--off { color: var(--text-muted); border-color: var(--border-light); } .mr-rail .mr-bf-val { margin: 4px 0 0; line-height: 1.1; font-size: 34px; font-weight: 800; color: var(--mr-accent); font-variant-numeric: tabular-nums; } /* #calculated-fat ospita anche messaggi ("Non calcolabile", "Età mancante") */ .mr-rail .mr-bf-val--msg { font-size: 15px; font-weight: 700; color: var(--text-secondary); line-height: 1.35; padding: 6px 0 2px; } .mr-bf-meta { margin-top: 3px; font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .mr-bf-delta { margin-top: 7px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); } .mr-bf-delta:empty { display: none; } .mr-bf-delta--good { color: var(--success-dark); } .mr-bf-delta--bad { color: var(--danger-dark); } .mr-bf-delta--flat { color: var(--text-secondary); } /* confronto rifiutato (formula diversa o BF assente sulla data di riferimento): è un'assenza di dato, non un risultato — deve leggersi come nota, non come Δ */ .mr-bf-delta--na { font-weight: 600; font-style: italic; color: var(--text-muted); } /* suggerimento formula: applicabile con un click, perché la formula non si sostituisce più da sola quando il cliente ne ha già una salvata */ .measurements-grid--redesign .suggestion-apply { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 11px; border-radius: 99px; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700; background: var(--mr-accent-bg); color: var(--mr-accent); border: 1px solid var(--mr-accent-border); } .measurements-grid--redesign .suggestion-apply:hover { background: var(--mr-accent); color: #fff; border-color: var(--mr-accent); } .measurements-grid--redesign .suggestion-missing { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font-size: 11.5px; font-weight: 700; color: var(--warning-dark); } /* ── rail: card composizione attuale ───────────────────────────────── */ /* 3 tile (Peso, BMI, Grasso visc.): il BF è salito nella hero qui sopra */ .mr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mr-tile { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-light); background: var(--bg-surface-card); } .mr-tile-lb { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); line-height: 1.2; } .mr-tile-lb i { font-style: normal; } /* updateVisceralFatDisplay RISCRIVE className di #calculated-visceral-fat in "body-fat-value ": va quindi stilato per id, mai con una classe di layout. Il selettore parte da .mr-rail perché responsive_clean.css — che carica DOPO questo file — ha `#measurements-tab .body-fat-value` (1,1,0) con font-size fino a 2.8em: serve (1,2,0) per vincere, e va azzerato anche il `margin: 10px 0` di .body-fat-value. */ .mr-rail .mr-tile .mr-tile-v, .mr-rail .mr-tile #calculated-fat, .mr-rail .mr-tile #calculated-visceral-fat { font-size: 17px; font-weight: 800; color: var(--text-heading); font-variant-numeric: tabular-nums; margin: 0; line-height: 1.25; } .mr-tile--accent { background: var(--mr-accent-bg); border-color: var(--mr-accent-border); } .mr-rail .mr-tile--accent #calculated-fat { color: var(--mr-accent); } .mr-tile-sub { font-size: 10.5px; color: var(--text-secondary); } .mr-tile-sub .vf-method-sub { display: none; } .mr-rail .mr-tile .vf-class-badge { font-size: 9.5px; padding: 1px 6px; } /* ── piè della card circonferenze: salva selezione ─────────────────── */ .mr-cardfoot--circ { justify-content: space-between; } /* ── rail: analisi misure (neutralizza il pannello legacy colorato) ── */ .mr-rail .antropo-analysis-panel { margin: 0; padding: 0; border-radius: 0; background: none; color: inherit; text-align: left; } .mr-an-value { font-size: 24px; font-weight: 800; color: var(--text-heading); font-variant-numeric: tabular-nums; } .mr-an-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; } .mr-an-hint { font-size: 10.5px; color: var(--text-muted); margin: 10px 0 0; } .mr-rail .antropo-analysis-indices { margin-top: 12px; } .mr-rail .antropo-indices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mr-rail .antropo-index-item { padding: 8px 9px; border-radius: 10px; text-align: left; border: 1px solid var(--border-light); background: var(--bg-surface-card); } .mr-rail .antropo-index-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); opacity: 1; } .mr-rail .antropo-index-value { font-size: 15px; font-weight: 800; color: var(--mr-accent); } /* ── rail: valutazione antropo-plicometrica (#antropo-plico-results-wrapper) Il markup arriva da generateResultsHTML() (js/misurazioni/antropo-plico-calc.js) ed è dimensionato per una colonna larga: header a gradiente da 35px/40px, griglie a minmax(200–300px) e cifre da 2em. Qui viene ricompattato per il rail senza toccare quel file — tutti i selettori sono `.mr-rail X` (0,2,0) e battono le regole originali (0,1,0). ─────────────────────────────── */ .mr-rail #antropo-plico-results-wrapper { min-height: 0; overflow: visible; } .mr-rail .antropo-plico-empty-state { margin: 0; font-size: 11.5px; color: var(--text-muted); } .mr-rail .antropo-plico-empty-state p { margin: 0; } .mr-rail .results-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 9px; margin: 0 0 11px; background: none; color: var(--text-heading); border-radius: 0; border-bottom: 1px solid var(--border-lightest); } .mr-rail .results-header h3 { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .mr-rail .results-header small { display: none; /* "Aggiornamento automatico": ridondante in un rail stretto */ } .mr-rail .apc-container { padding: 0; } .mr-rail .apc-section { background: none; padding: 0; margin: 0 0 14px; } .mr-rail .apc-section-title { font-size: 10px; font-weight: 800; letter-spacing: .05em; margin: 0 0 9px; padding-bottom: 6px; border-bottom-width: 1px; } .mr-rail .apc-grid { grid-template-columns: 1fr; gap: 9px; } .mr-rail .apc-card { padding: 10px 11px; border-radius: 10px; box-shadow: none; border: 1px solid var(--border-light); } .mr-rail .apc-card-title { font-size: 12px; margin: 0 0 8px; } .mr-rail .apc-stat-list { gap: 4px; } .mr-rail .apc-stat-row, .mr-rail .apc-stat-row-bordered { padding: 3px 0; font-size: 11.5px; gap: 8px; } .mr-rail .apc-arto-sx { font-size: 10.5px; } /* .apc-gradient-section--composizione usa --analysis-full-bg, che è viola in entrambi i temi e non conosce il modulo: qui passa da --mr-panel-bg. */ .mr-rail .apc-gradient-section { padding: 12px; margin: 0 0 14px; border-radius: 10px; } .mr-rail .apc-gradient-section--composizione { background: var(--mr-panel-bg); } /* .apc-section-title eredita --gradient-app-start (già module-aware) ma il verde del theme training è più scuro dell'accent: uniformiamo. */ .mr-rail .apc-section-title { color: var(--mr-accent); border-bottom-color: var(--mr-accent-border); } .mr-rail .apc-gradient-title { font-size: 11px; font-weight: 800; margin: 0 0 10px; } .mr-rail .apc-formula-badge { font-size: 9px; padding: 2px 7px; margin-left: 6px; } .mr-rail .apc-overlay-grid, .mr-rail .apc-overlay-grid-3col, .mr-rail .apc-overlay-grid-2col { grid-template-columns: 1fr 1fr; gap: 7px; } .mr-rail .apc-overlay-card { padding: 8px 6px; border-radius: 8px; } .mr-rail .apc-overlay-card-sm { padding: 7px; } .mr-rail .apc-stat-small, .mr-rail .apc-stat-xsmall { font-size: 9.5px; } .mr-rail .apc-stat-big { font-size: 16px; margin: 2px 0 0; } .mr-rail .apc-stat-sub, .mr-rail .apc-stat-sub-sm { font-size: 10px; } .mr-rail .apc-stat-mid { font-size: 12px; } .mr-rail .apc-divider, .mr-rail .apc-divider-top { margin-top: 10px; padding-top: 10px; } /* .apc-flex-around è flex space-around: in 340px collassa. */ .mr-rail .apc-flex-around { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; } .mr-rail .apc-warning-yellow, .mr-rail .apc-warning-red { padding: 8px; font-size: 10.5px; margin-bottom: 10px; } /* ── rail: storico peso compatto (#mr-weight) ────────────────────────── Card autonoma: il blocco .weight-history-section di client-detail.html è riservato al tab Info (ensureWeightHistoryInInfoTab lo sposta lì), quindi qui NON si riusano #chart-weight-history / #weight-history-table-wrap. */ .mr-w-hero { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mr-w-cur { font-size: 20px; font-weight: 800; color: var(--text-heading); font-variant-numeric: tabular-nums; } .mr-w-delta { font-size: 11px; font-weight: 700; color: var(--text-secondary); } .mr-w-delta--up { color: var(--warning-text); } .mr-w-delta--down { color: var(--success-text); } .mr-w-chart { position: relative; height: 110px; margin: 10px 0 4px; } .mr-w-chart--off { height: 0; margin: 0; overflow: hidden; } .mr-w-empty { margin: 8px 0 0; font-size: 11.5px; color: var(--text-muted); } .mr-w-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border-lightest); font-size: 11.5px; } .mr-w-row:last-child { border-bottom: 0; } .mr-w-date { color: var(--text-secondary); flex: 1; } .mr-w-kg { font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; } .mr-w-del { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; flex: none; border: 0; border-radius: 6px; background: none; cursor: pointer; opacity: .45; } .mr-w-del:hover { opacity: 1; background: var(--danger-bg); } .mr-w-del img { width: 12px; height: 12px; }