/* ========================================================================== ACCADEMY — Dashboard Coach RSC Mechit Tema scuro coerente con l'hub admin (#0a0a0a + accento #ccff00). Ottimizzata per tablet in orizzontale: layout compatto, testi grandi, target touch >= 40px. ========================================================================== */ :root { --bg: #0a0a0a; --card: #141414; --card2: #1b1b1b; --border: #2a2a2a; --accent: #ccff00; --txt: #f0f0f0; --dim: #909090; --ok: #8bc34a; --warn: #ffb300; --bad: #ff5a5a; --blue: #7aa7ff; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { background: var(--bg); color: var(--txt); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 15px; /* NIENTE scroll orizzontale a livello di pagina (compariva anche nel login): lo scorrimento orizzontale vive SOLO nei contenitori interni (main, card, tabs) e solo quando il loro contenuto è davvero più largo. */ overflow-x: hidden; overflow-y: auto; } button { font-family: inherit; } /* wrapper generico: qualunque contenuto più largo dello schermo diventa scorrevole in orizzontale invece di venire tagliato */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ---------- login ---------- */ #login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #151a05 0%, var(--bg) 60%); z-index: 100; } .login-card { width: min(380px, 92vw); background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 30px 28px; text-align: center; } .login-card h1 { font-size: 1.4rem; letter-spacing: .08em; margin-bottom: 4px; } .login-card h1 span { color: var(--accent); } .login-card p { color: var(--dim); font-size: .82rem; margin-bottom: 20px; } .login-card input { width: 100%; padding: 12px 14px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--border); background: #0e0e0e; color: var(--txt); font-size: 1rem; } .login-card input:focus { outline: none; border-color: var(--accent); } .login-card button { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: var(--accent); color: #111; font-weight: 800; font-size: 1rem; cursor: pointer; letter-spacing: .05em; } .login-error { color: var(--bad); font-size: .84rem; min-height: 20px; margin-top: 10px; } /* ---------- app shell ---------- */ #app { display: none; flex-direction: column; height: 100vh; height: 100dvh; } #app.on { display: flex; } .topbar { display: flex; align-items: center; gap: 10px 14px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: #0d0d0d; flex-shrink: 0; /* la barra va a capo invece di venire tagliata su schermi stretti */ flex-wrap: wrap; } .topbar .brand { font-weight: 800; letter-spacing: .1em; font-size: 1rem; white-space: nowrap; } .topbar .brand span { color: var(--accent); } .tabs { display: flex; gap: 4px; flex: 1 1 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; } .tabs button { padding: 9px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--dim); font-weight: 700; font-size: .82rem; letter-spacing: .08em; cursor: pointer; white-space: nowrap; position: relative; /* ancora per il pallino notifiche in sovraimpressione */ } .tabs button.active { background: var(--accent); color: #111; } /* notifiche sui tab: numero in sovraimpressione nell'angolo — il testo del menu NON si sposta mai quando il contatore appare o cambia */ .tabs .tab-badge { position: absolute; top: 2px; right: 3px; margin: 0; } .topbar .status { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--dim); } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); } .dot.off { background: var(--bad); } .topbar .logout { background: none; border: 1px solid var(--border); color: var(--dim); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: .76rem; } /* verticale sempre; orizzontale SOLO se una vista è davvero più larga dello schermo (auto = nessuna barra quando il contenuto ci sta) */ main { flex: 1; overflow-y: auto; overflow-x: auto; padding: 14px 16px; -webkit-overflow-scrolling: touch; min-width: 0; } .view { display: none; } .view.on { display: block; } /* ---------- comuni ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; /* tabelle/contenuti larghi scorrono dentro la card invece di sforare */ overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; } h2.section { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 4px 0 10px; } .muted { color: var(--dim); } .mono { font-variant-numeric: tabular-nums; } .btn { padding: 9px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--card2); color: var(--txt); font-weight: 600; font-size: .82rem; cursor: pointer; } .btn.primary { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 800; } .btn.danger { border-color: var(--bad); color: var(--bad); } .btn:disabled { opacity: .4; cursor: default; } select, input[type="text"], input[type="number"], input[type="password"], input[type="search"], textarea { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: #0e0e0e; color: var(--txt); font-size: .9rem; font-family: inherit; } select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); } /* campo ricerca: niente stile nativo del browser (lente/x di sistema) */ input[type="search"] { -webkit-appearance: none; appearance: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } input::placeholder { color: var(--dim); opacity: .8; } table.list { width: 100%; border-collapse: collapse; font-size: .86rem; } table.list th, table.list td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #1e1e1e; } table.list th { color: var(--dim); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; } table.list tr.clickable { cursor: pointer; } table.list tr.clickable:active { background: #191f0a; } table.list tr.sel { background: #1c2408; } .badge-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-right: 4px; } .badge-pill.l1 { background: #4e3421; color: #e8a05e; } /* bronzo */ .badge-pill.l2 { background: #3a3f45; color: #cfd8e3; } /* argento */ .badge-pill.l3 { background: #4a3f07; color: #ffd94d; } /* oro */ .score-num { font-weight: 800; } .sc-good { color: var(--ok); } .sc-mid { color: var(--accent); } .sc-low { color: var(--warn); } .sc-bad { color: var(--bad); } .sc-none { color: var(--dim); } /* ---------- LIVE ---------- */ /* Griglia pensata per 8 postazioni ben leggibili: card compatte, 4 colonne su schermi larghi (>=1220px), 2 su tablet, 1 su telefono. Gli alert non occupano più una colonna fissa: vivono nel flyout laterale. */ .stations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); gap: 10px; min-width: 0; } .st-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; cursor: pointer; transition: border-color .15s; } /* Card espansa: occupa DUE colonne (non tutta la riga): abbastanza spazio per striscia tempi e giri senza che i contenuti si disperdano in una fascia larghissima. Su schermi stretti (una colonna) resta a tutta larghezza. */ .st-card.expanded { border-color: var(--accent); grid-column: 1 / -1; } @media (min-width: 640px) { .st-card.expanded { grid-column: span 2; } } .st-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .st-head .name { font-weight: 800; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .st-head .station-tag { flex-shrink: 0; background: var(--card2); border: 1px solid var(--border); color: var(--accent); font-size: .64rem; font-weight: 800; letter-spacing: .08em; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; white-space: nowrap; } .st-head .q { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; } .q.good { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .q.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); } .q.bad { background: var(--bad); box-shadow: 0 0 8px var(--bad); } .q.idle { background: #444; } .st-sub { color: var(--dim); font-size: .74rem; margin-bottom: 8px; } /* 4 riquadri compatti (Giro/Ultimo/Best/Costanza): niente righe di testo sparse, tutto lo spazio orizzontale della card viene usato. Su card strette i riquadri vanno su 2 colonne. */ .st-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; } .st-card:not(.expanded) .st-times { grid-template-columns: repeat(2, 1fr); } @media (min-width: 1500px) { .st-card:not(.expanded) .st-times { grid-template-columns: repeat(4, 1fr); } } .st-times .tt { background: var(--card2); border-radius: 9px; padding: 5px 8px; min-width: 0; } .st-times .tt .l { font-size: .58rem; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; } .st-times .tt .v { font-weight: 800; font-size: .92rem; /* i tempi non devono MAI sfondare il riquadro */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-inputs { display: flex; align-items: center; gap: 8px; } /* Elettronica live: BB/TC/TC2/MAP/ABS — il valore appena cambiato pulsa */ .st-elec { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .st-elec .ec { font-size: .66rem; font-family: var(--mono, monospace); color: var(--muted, #8b93a7); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 5px; padding: 2px 6px; white-space: nowrap; } .st-elec .ec b { color: #c8cfdd; font-weight: 600; margin-right: 2px; } .st-elec .ec.chg { color: #ffd76a; border-color: rgba(255, 215, 106, .55); animation: elec-pulse 1s ease-in-out infinite; } @keyframes elec-pulse { 50% { background: rgba(255, 215, 106, .18); } } .ibar { flex: 1; height: 12px; background: #222; border-radius: 6px; overflow: hidden; } /* la transizione copre l'intervallo tra due push live (250 ms): le barre scivolano al valore nuovo invece di saltare a scatti */ .ibar i { display: block; height: 100%; width: 0%; transition: width .25s linear; } .ibar.gas i { background: var(--ok); } .ibar.brk i { background: var(--bad); } .st-gear { min-width: 34px; height: 34px; border-radius: 9px; background: var(--card2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; } .st-speed { min-width: 66px; text-align: right; font-weight: 700; font-size: .95rem; } .st-detail { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; } /* prima riga del dettaglio: punteggi a sinistra, azione a destra (una riga sola invece di due: meno spazio sprecato) */ .st-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } /* striscia ORIZZONTALE del dettaglio: tempi chiave e punteggi affiancati in celle (niente righe verticali che sprecano spazio) */ .st-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .st-strip .cell { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; min-width: 0; } .st-strip .cell .l { font-size: .58rem; font-weight: 800; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; white-space: nowrap; } .st-strip .cell .t { font-weight: 800; font-size: .95rem; white-space: nowrap; } .st-strip .cell .s { margin-top: 3px; font-size: .7rem; color: var(--dim); } .st-strip .cell.time { flex: 1 1 128px; } .st-strip .cell.time.best .t, .st-strip .cell.time.best .l { color: var(--accent); } .st-strip .cell.time.theo .t, .st-strip .cell.time.theo .l { color: #7aa7ff; } .st-strip .cell.score { flex: 1 0 52px; max-width: 90px; text-align: center; } .st-strip .cell.score.tot { border-color: var(--accent); } .st-strip .cell.score.sc-good .t { color: var(--ok); } .st-strip .cell.score.sc-mid .t { color: var(--accent); } .st-strip .cell.score.sc-bad .t { color: var(--bad); } .st-laps { max-height: 150px; overflow-y: auto; margin-top: 8px; font-size: .8rem; } .st-laps .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 4px; border-bottom: 1px solid #1c1c1c; } .st-laps .row span:nth-child(2) { flex: 1; text-align: center; } .st-laps .row.best { color: var(--accent); } .st-laps .row.invalid { color: #b06a6a; } /* tabella criteri: soglie in secondi con testo attorno agli input */ #criteria-table .crit-cell { white-space: nowrap; font-size: .76rem; color: var(--dim); } #criteria-table .crit-cell input, #criteria-table td input[id^="set-c-"] { width: 64px; } /* regole elettronica: input min/max COMPATTI, la tabella sta nella card senza scorrimento laterale (le frecce native dello spinner rubano larghezza) */ #elec-table td, #elec-table th { padding: 6px 8px; } #elec-table td:first-child { white-space: nowrap; width: 1%; } #elec-table input[type="number"] { width: 100%; max-width: 88px; box-sizing: border-box; padding: 6px 8px; font-size: .82rem; -moz-appearance: textfield; } #elec-table input[type="number"]::-webkit-outer-spin-button, #elec-table input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* colonne settore separate nelle tabelle tempi */ .list th.sec-th { text-align: center; color: var(--dim); } .list td.sec-td { text-align: center; font-size: .76rem; } /* settori come 3 riquadrini separati ed etichettati (S1 S2 S3) */ .secs { display: inline-flex; gap: 5px; flex-wrap: wrap; } .secs .sec { background: var(--card2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: .72rem; line-height: 1.5; color: inherit; display: inline-flex; align-items: baseline; gap: 4px; } .secs .sec b { font-size: .56rem; font-weight: 800; color: var(--dim); letter-spacing: .04em; } .secs .sec i { font-style: normal; } /* riga del giro BASE nel dettaglio sessione */ .list tr.ref-row td { background: rgba(204, 255, 0, .07); } .list tr.ref-row td:first-child { border-left: 3px solid var(--accent); } .ref-flag { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; font-size: .6rem; font-weight: 800; letter-spacing: .06em; vertical-align: middle; } .empty { color: var(--dim); text-align: center; padding: 30px 10px; font-size: .86rem; } /* ---------- ALERT FLYOUT (segnalibro laterale) ---------- */ #alerts-tab { position: fixed; right: 0; top: 40%; z-index: 150; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--card2); border: 1px solid var(--border); border-right: 0; border-radius: 12px 0 0 12px; padding: 12px 8px; cursor: pointer; box-shadow: -4px 0 14px rgba(0,0,0,.5); } #alerts-tab .at-label { writing-mode: vertical-rl; text-orientation: mixed; font-size: .68rem; font-weight: 800; letter-spacing: .2em; color: var(--dim); } #alerts-tab .at-count { min-width: 22px; height: 22px; border-radius: 11px; background: #333; color: var(--dim); font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 5px; } #alerts-tab.has-alerts { border-color: var(--warn); } #alerts-tab.has-alerts .at-label { color: var(--warn); } #alerts-tab.has-alerts .at-count { background: var(--warn); color: #111; } #alerts-tab.pulse .at-count { animation: alert-pulse 1s ease 3; } @keyframes alert-pulse { 50% { transform: scale(1.35); } } #alerts-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 160; opacity: 0; pointer-events: none; transition: opacity .2s; } #alerts-overlay.on { opacity: 1; pointer-events: auto; } #alerts-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 170; width: min(380px, 92vw); background: var(--card); border-left: 1px solid var(--border); padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(105%); transition: transform .22s ease; box-shadow: -10px 0 30px rgba(0,0,0,.6); } #alerts-drawer.on { transform: translateX(0); } #alerts-drawer .ad-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } #alerts-drawer .al { background: var(--card2); border-left: 3px solid var(--warn); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: .8rem; display: flex; align-items: flex-start; gap: 8px; } #alerts-drawer .al .t { color: var(--dim); font-size: .68rem; } #alerts-drawer .al .al-del { padding: 2px 9px; font-size: .72rem; color: var(--bad); flex: 0 0 auto; } /* ---------- ANALISI ---------- */ /* blocchi numerati: navigazione a step (1 archivio, 2 live, 3 grafico) */ .an-block { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .an-block-title { font-size: .74rem; font-weight: 800; letter-spacing: .1em; color: var(--accent); margin-bottom: 10px; } .an-block-title .muted { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .72rem; } .an-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; align-items: center; } .an-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; } .live-on { background: var(--accent) !important; color: #111 !important; border-color: var(--accent) !important; font-weight: 800; } .lap-chip.live-chip { border-style: solid; } .lap-chip.nosamples { opacity: .4; cursor: not-allowed; text-decoration: line-through; } #an-marker-list .mk-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 16px; border: 1px dashed var(--accent); font-size: .72rem; } #an-marker-list .mk-chip .mk-del { color: var(--bad); cursor: pointer; font-weight: 800; } #an-marker-list .mk-chip .mk-name { cursor: pointer; } #an-marker-list .mk-chip .mk-name:hover { color: var(--accent); text-decoration: underline dotted; } #an-marker-list .mk-chip .mk-move { cursor: pointer; font-weight: 800; color: var(--dim); padding: 0 2px; } #an-marker-list .mk-chip .mk-move:hover { color: var(--accent); } #an-marker-list .mk-chip.moving { border-style: solid; border-color: var(--accent); background: #1c2408; } #an-marker-list .mk-chip.moving .mk-move { color: var(--accent); } #an-gaps table.list td, #an-gaps table.list th { padding: 7px 10px; } #an-gaps .gap-summary { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: .84rem; display: flex; gap: 24px; flex-wrap: wrap; } #an-gaps .gap-summary b { color: var(--accent); } /* pannello cursore (lettura punto-punto) */ #an-cursor { background: var(--card2); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; margin: 8px 0; } #an-cursor .cursor-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .84rem; } #an-cursor .cursor-table td, #an-cursor .cursor-table th { padding: 5px 10px; font-size: .78rem; white-space: nowrap; } #an-cursor .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; } /* badge tipo sessione (QUALIFICA / GARA / PRACTICE) */ .sess-type { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; border: 1px solid var(--border); color: var(--dim); vertical-align: middle; } .sess-type.race { border-color: var(--accent); color: var(--accent); } .lap-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; } .lap-chip { padding: 7px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--card2); font-size: .78rem; cursor: pointer; user-select: none; } .lap-chip.sel { border-color: var(--accent); color: var(--accent); font-weight: 700; } .lap-chip.invalid { opacity: .5; } .lap-chip.ref { border-style: dashed; border-color: var(--accent); } /* esame: verdetto e controlli */ .exam-banner { border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: .78rem; letter-spacing: .02em; } .exam-banner.pass { background: #14260e; border: 1px solid #8bc34a; color: #c5e1a5; } .exam-banner.fail { background: #2a0f0f; border: 1px solid #ff5a5a; color: #ffb3b3; } .exam-banner.na { background: #221c08; border: 1px dashed #ffb300; color: #ffd98a; } .course-chip.exam { border-color: #ffb300; color: #ffb300; } .course-chip.exam.sel { background: #ffb300; color: #111; } .exam-pill { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; vertical-align: middle; } .exam-pill.pass { border: 1px solid #8bc34a; color: #8bc34a; } .exam-pill.fail { border: 1px solid #ff5a5a; color: #ff5a5a; } .exam-pill.na { border: 1px solid #ffb300; color: #ffb300; } .manual-ref-form { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .manual-ref-form input { flex: 1 1 120px; min-width: 0; } .manual-ref-form #mref-time { flex: 0 1 110px; } .manual-ref-form .btn { flex: 0 0 auto; } #exam-table .crit-cell input { width: 58px; } /* tabella selezione Open Day: deve stare in UNA colonna della griglia impostazioni senza tagliare gli input — celle compatte, input fluidi */ #odrec-table { table-layout: fixed; } #odrec-table th, #odrec-table td { padding: 6px 3px; } #odrec-table th { font-size: .62rem; letter-spacing: .06em; text-align: center; overflow: hidden; } #odrec-table th:first-child { width: 30%; } #odrec-table td:first-child { font-size: .68rem; color: var(--dim); white-space: normal; } #odrec-table td { text-align: center; } #odrec-table input { width: 100%; max-width: 58px; min-width: 0; padding: 6px 4px; text-align: center; box-sizing: border-box; } /* OPEN DAY — postazioni e schermi (IMPOSTAZIONI). Le postazioni sono molte: il riquadro occupa TUTTA la larghezza della griglia impostazioni e le schede si affiancano, invece di impilarsi in una colonna stretta che tagliava i campi e allungava la pagina all'infinito. */ .set-grid > .card[data-cs="openday"] { grid-column: 1 / -1; } .od-st-title { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin: 14px 0 8px; } #od-stations { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); } /* Flex con a-capo automatico (non media query): i campi si riordinano in base allo spazio REALE della scheda, non a quello dello schermo. */ .od-st { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; } .od-st .od-f { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .od-st .od-f > span { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } /* nome sempre su una riga propria, poi IP (elastico) e i due canali */ .od-st .od-f-name { flex: 1 1 100%; } .od-st .od-f-ip { flex: 5 1 140px; } .od-st .od-f-ch { flex: 1 1 72px; max-width: 100px; } .od-st .od-name { display: flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 700; min-width: 0; } .od-st .od-name > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .od-st .od-dot { width: 7px; height: 7px; border-radius: 50%; background: #444; flex: 0 0 auto; } .od-st .od-dot.on { background: var(--accent); } .od-st input { width: 100%; min-width: 0; padding: 8px 9px; font-size: .86rem; } .od-st input[type="number"] { text-align: center; -moz-appearance: textfield; } .od-st input[type="number"]::-webkit-outer-spin-button, .od-st input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .od-empty { padding: 12px; font-size: .8rem; } /* tabella basi di riferimento (IMPOSTAZIONI): righe disattivate attenuate */ .refs-table tr.ref-off td { opacity: .5; } .refs-table .ref-state { font-size: .68rem; letter-spacing: .08em; color: var(--dim); } .refs-table .ref-state.on { color: var(--accent); font-weight: 700; } .ref-banner { background: #1c2408; border: 1px dashed var(--accent); border-radius: 10px; padding: 8px 12px; font-size: .8rem; margin-bottom: 10px; } /* l'altezza reale la imposta drawOverlay() in base ai canali attivi (tetto per banda: un solo canale non si stira a tutta pagina) */ #overlay-canvas { width: 100%; height: 420px; background: #0e0e0e; border-radius: 12px; border: 1px solid var(--border); touch-action: none; cursor: grab; } .chan-toggles { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .chan-toggles .ct { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: .76rem; cursor: pointer; color: var(--dim); } .chan-toggles .ct.on { color: var(--txt); border-color: currentColor; } .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; margin-bottom: 8px; } .legend .li { display: flex; align-items: center; gap: 6px; } .legend .sw { width: 14px; height: 4px; border-radius: 2px; } /* ---------- GUIDA ---------- */ .guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; } .gl-item { padding: 10px 0; border-bottom: 1px solid #1e1e1e; } .gl-item:last-child { border-bottom: 0; } .gl-item b { color: var(--accent); font-size: .9rem; } .gl-item p { color: #cfcfcf; font-size: .8rem; margin-top: 4px; line-height: 1.5; } .gl-item u { text-decoration-color: var(--accent); } /* ---------- CORSI / CLASSIFICAZIONE ---------- */ .course-picker { display: flex; gap: 8px; flex-wrap: wrap; } .course-chip { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--card2); font-size: .78rem; font-weight: 800; letter-spacing: .06em; cursor: pointer; user-select: none; color: var(--dim); /* inline-block: da inline puro il padding verticale NON allarga la riga e quando i chip vanno a capo (es. filtri dentro le intestazioni su smartphone) le righe si sovrappongono l'una sull'altra */ display: inline-block; white-space: nowrap; } .course-chip.sel { border-color: var(--accent); color: var(--accent); } /* selettore corso compatto dentro il popup sessione */ .sess-course-row { font-size: .76rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .course-picker.mini { display: inline-flex; gap: 5px; } .course-picker.mini .course-chip { padding: 3px 10px; font-size: .66rem; border-radius: 12px; } .class-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; border: 1px solid; vertical-align: middle; } .class-pill.gold { color: #ffd700; border-color: #ffd700; } .class-pill.silver { color: #c0c0c0; border-color: #c0c0c0; } .class-pill.bronze { color: #cd7f32; border-color: #cd7f32; } /* ---------- MODAL DETTAGLIO SESSIONE ---------- */ /* ---------- RUOLI: elementi solo-admin nascosti agli altri profili ---------- */ body:not(.role-admin) .adm { display: none !important; } /* ...ma i blocchi che l'admin ha ABILITATO al coach (Pannello coach) riappaiono */ body.role-coach .adm.cs-on { display: block !important; } /* portale allievo: niente contenuti live (lavora solo su archivio) */ body.student-portal .g-live { display: none !important; } /* Coach con LIVE offline: niente telemetria live in analisi */ body.coach-no-live .g-live { display: none !important; } body.coach-no-live #an-live-stations, body.coach-no-live #an-live-title { display: none !important; } /* Banner LIVE offline (scheda LIVE del coach quando l'admin spegne il feed) */ .live-offline-banner { margin: 0 0 12px; padding: 10px 14px; border: 1px solid rgba(255, 90, 90, 0.45); background: rgba(255, 90, 90, 0.1); color: #ff8a8a; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 8px; } /* ...e nella guida niente sezioni da coach/admin (staff, open day, utenti) */ body.student-portal .g-coach { display: none !important; } /* portale allievo: niente elenco piloti, solo la propria scheda a tutta pagina */ body.student-portal #view-pilots .two-col { grid-template-columns: 1fr; } body.student-portal #view-pilots .two-col > .card:first-child { display: none; } /* ...e niente ALERT coach: segnalibro laterale e drawer sono roba da coach. Vale per allievo E mental coach (classe no-alerts messa da applyRoleUi). */ body.student-portal #alerts-tab, body.student-portal #alerts-overlay, body.student-portal #alerts-drawer, body.no-alerts #alerts-tab, body.no-alerts #alerts-overlay, body.no-alerts #alerts-drawer { display: none !important; } /* ...e in ANALISI niente comandi da coach (note, basi, punti pista, live) */ body.student-portal #an-set-session-ref, body.student-portal #an-note-btn, body.student-portal #an-marker-add, body.student-portal #an-live-stations, body.student-portal #an-live-title { display: none !important; } body.student-portal #an-pilot { pointer-events: none; opacity: .75; } /* riga meta pilota (corso / corse gratuite / contatti) nel dettaglio */ .pilot-meta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--card2); border-radius: 8px; padding: 8px 12px; margin-top: 10px; font-size: .8rem; } .pilot-meta-row .pm-item { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); } .pilot-meta-row select, .pilot-meta-row input { background: var(--card); color: var(--txt); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: .78rem; } /* gestione utenti (impostazioni, solo admin) */ .um-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .um-form input, .um-form select { background: var(--card2); color: var(--txt); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: .85rem; } .um-form input:focus, .um-form select:focus { outline: none; border-color: var(--accent); } /* colonna password (solo admin): valore leggibile e pulsante occhio accostati */ #users-table .pw-cell { white-space: nowrap; } #users-table .pw-val { font-family: var(--mono, monospace); font-size: .78rem; margin-right: 4px; } #users-table select[data-um-course] { padding: 4px 8px; font-size: .74rem; } #users-table .role-tag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--border); color: var(--dim); } #users-table .role-tag.admin { color: var(--accent); border-color: var(--accent); } #users-table .role-tag.coach { color: var(--blue); border-color: var(--blue); } #users-table .role-tag.mechitstaff { color: var(--warn); border-color: var(--warn); } .uf-editor { background: var(--card2); border-radius: 8px; padding: 10px; } .uf-editor label { display: inline-flex; align-items: center; gap: 5px; margin: 3px 12px 3px 0; font-size: .78rem; } /* Pannello coach: elenco spunte dei blocchi admin abilitabili */ .cs-list label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .8rem; } /* contatore sul tab DOMANDE (domande in attesa di risposta) */ .tab-badge { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: .62rem; font-weight: 800; text-align: center; vertical-align: middle; margin-left: 3px; } /* DOMANDE — vista email del coach: elenco a sinistra, anteprima a destra */ .qa-mail { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 14px; align-items: start; } @media (max-width: 900px) { .qa-mail { grid-template-columns: 1fr; } } .qa-side .qa-n { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: .62rem; font-weight: 800; margin-left: 4px; } .qa-side .qa-n:empty { display: none; } .qa-msg { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; background: var(--card2); } .qa-msg:hover { border-color: var(--accent); } .qa-msg.sel { border-color: var(--accent); background: #1e2410; } .qa-msg.unread { border-left: 3px solid var(--accent); } .qa-msg.unread .qm-from { font-weight: 800; color: var(--txt); } .qa-msg .qm-from { font-size: .8rem; color: var(--dim); display: flex; align-items: center; gap: 6px; } .qa-msg .qm-from .dot-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } .qa-msg .qm-prev { font-size: .72rem; color: var(--dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qa-msg .qm-date { font-size: .62rem; color: var(--dim); margin-top: 2px; } .qa-view { min-height: 300px; } .qa-view .qv-head { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; } .qa-view .qv-text { font-size: .92rem; line-height: 1.5; white-space: pre-wrap; } /* DOMANDE — portale allievo: countdown sblocco prossima domanda */ #qa-countdown { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; margin-bottom: 10px; } #qa-countdown .cd-big { font-size: 1.5rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } #qa-countdown .cd-lbl { font-size: .72rem; color: var(--dim); margin-top: 2px; } /* Q&A allievo ↔ coach */ .qa-form textarea { width: 100%; min-height: 70px; background: var(--card2); color: var(--txt); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: .84rem; resize: vertical; box-sizing: border-box; } .qa-form { margin-bottom: 10px; } .qa-form input[type="file"] { font-size: .72rem; color: var(--dim); max-width: 60%; } .qa-item .qa-answer { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--card2); border-radius: 0 8px 8px 0; } .qa-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .qa-files a { color: var(--blue); font-size: .74rem; text-decoration: none; } .qa-files a:hover { text-decoration: underline; } /* vista STAFF: postazioni in allenamento */ .staff-st { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .staff-st.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .staff-st > div { display: flex; flex-direction: column; gap: 2px; } /* ---------- MODAL NOTA DEL COACH (live + analisi) ---------- */ #note-modal { position: fixed; inset: 0; z-index: 260; display: none; } #note-modal.on { display: block; } #note-modal .nm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); } #note-modal .nm-panel { position: absolute; left: 50%; top: 16vh; transform: translateX(-50%); width: min(640px, 94vw); background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 18px 60px rgba(0,0,0,.7); } #note-modal .nm-target { color: var(--accent); font-weight: 700; font-size: .92rem; margin-bottom: 10px; } #note-modal textarea { width: 100%; min-height: 170px; resize: vertical; box-sizing: border-box; background: var(--card2); color: var(--txt); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: .95rem; line-height: 1.45; font-family: inherit; } #note-modal textarea:focus { outline: none; border-color: var(--accent); } #note-modal .nm-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } /* bottone nota sulla card postazione (vista live) */ .st-card .note-btn { background: none; border: 1px solid var(--border); color: var(--dim); border-radius: 7px; padding: 2px 8px; font-size: .8rem; cursor: pointer; line-height: 1.3; } .st-card .note-btn:hover { color: var(--accent); border-color: var(--accent); } #session-modal { position: fixed; inset: 0; z-index: 200; display: none; } #session-modal.on { display: block; } #session-modal .sm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); } #session-modal .sm-panel { position: absolute; inset: 4vh 4vw; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.7); } #session-modal .sm-close { position: sticky; top: 0; float: right; z-index: 5; } @media (max-width: 700px) { #session-modal .sm-panel { inset: 2vh 2vw; padding: 12px; } } /* Tabella giri del dettaglio: si estende fino al fondo del pannello, con barra di scorrimento SEMPRE visibile e freccia "scendi" finché sotto ci sono altre righe. */ .laps-scroll { max-height: calc(92vh - 330px); min-height: 280px; overflow-y: auto; position: relative; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(204,255,0,.5) rgba(255,255,255,.07); } .laps-scroll::-webkit-scrollbar { width: 10px; } .laps-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.07); border-radius: 5px; } .laps-scroll::-webkit-scrollbar-thumb { background: rgba(204,255,0,.45); border-radius: 5px; } .laps-scroll::-webkit-scrollbar-thumb:hover { background: rgba(204,255,0,.75); } .laps-scroll .scroll-hint { position: sticky; bottom: 0; left: 0; right: 0; text-align: center; padding: 22px 0 4px; font-size: .68rem; letter-spacing: .1em; font-weight: 700; color: var(--accent); background: linear-gradient(to bottom, rgba(20,20,20,0), rgba(20,20,20,.95) 55%); pointer-events: none; transition: opacity .25s; } .laps-scroll .scroll-hint.off { opacity: 0; } .laps-scroll .scroll-hint b { display: inline-block; animation: hint-bounce 1.2s ease-in-out infinite; } @keyframes hint-bounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } /* ---------- PILOTI / SESSIONI ---------- */ .two-col { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } } .pilot-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .pilot-head h3 { font-size: 1.3rem; } .subs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; } .subs-grid .sub { background: var(--card2); border-radius: 10px; padding: 8px 10px; } .subs-grid .sub .l { font-size: .62rem; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; } .subs-grid .sub .v { font-size: 1.3rem; font-weight: 800; } .trend-canvas { width: 100%; height: 170px; background: #0e0e0e; border-radius: 10px; border: 1px solid var(--border); } .notes-list .note { background: var(--card2); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; font-size: .84rem; } .notes-list .note .m { color: var(--dim); font-size: .68rem; margin-top: 3px; } .note-form { display: flex; gap: 8px; margin-top: 10px; } .note-form textarea { flex: 1; min-height: 44px; resize: vertical; } .merge-box { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; } /* ---------- IMPOSTAZIONI ---------- */ .set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #1e1e1e; } .set-row:last-child { border-bottom: 0; } .set-row .lbl { font-size: .88rem; } .set-row .hint { color: var(--dim); font-size: .72rem; margin-top: 2px; } .switch { position: relative; width: 52px; height: 28px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .sl { position: absolute; inset: 0; border-radius: 20px; background: #333; transition: .2s; cursor: pointer; } .switch .sl::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; left: 3px; top: 3px; background: #888; transition: .2s; } .switch input:checked + .sl { background: #45520a; } .switch input:checked + .sl::before { transform: translateX(24px); background: var(--accent); } .set-row input[type="number"] { width: 90px; } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--card2); border: 1px solid var(--accent); color: var(--txt); padding: 10px 22px; border-radius: 12px; font-size: .86rem; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .25s; } .toast.on { opacity: 1; } /* ---------- TRACK MAP INTEGRATA (iframe live / analisi / tab dedicato) ---------- */ .tm-frame { display: block; width: 100%; border: 1px solid var(--border); border-radius: 14px; background: #0a0a0a; } /* LIVE: mappa sempre visibile accanto alle postazioni (colonna sticky) */ .live-wrap { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 12px; align-items: start; } @media (max-width: 1100px) { .live-wrap { grid-template-columns: 1fr; } } .live-map { min-width: 0; position: sticky; top: 8px; } @media (max-width: 1100px) { .live-map { position: static; } } .live-map .tm-frame { height: min(64vh, 560px); } .live-map-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: .72rem; } .live-map-bar #tm-filter-lbl { font-size: .66rem; } .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .seg button { background: var(--card2); color: var(--dim); border: none; border-right: 1px solid var(--border); padding: 5px 11px; font-size: .7rem; font-weight: 700; cursor: pointer; } .seg button:last-child { border-right: 0; } .seg button.on { background: var(--accent); color: #0a0a0a; } /* toggle "◎ mappa" sulla card postazione: la card diventa filtro della mappa */ .st-card .map-eye { flex-shrink: 0; background: var(--card2); border: 1px solid var(--border); border-radius: 6px; color: var(--dim); font-size: .78rem; line-height: 1; padding: 3px 8px; cursor: pointer; } .st-card .map-eye.on { color: var(--accent); border-color: var(--accent); background: #1e2410; } /* ANALISI: grafico telemetrico e mappa affiancati */ .an-gm { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; align-items: stretch; } @media (max-width: 1100px) { .an-gm { grid-template-columns: 1fr; } } .an-gm-graph { min-width: 0; } .an-gm-map { min-width: 0; display: flex; flex-direction: column; } .an-gm-map .tm-frame { flex: 1 1 auto; min-height: 320px; } /* TAB TRACKMAP: pagina completa (replay sessione intera con i suoi filtri) */ #view-trackmap { padding: 0; } .tm-frame.tm-full { height: calc(100vh - 118px); border-radius: 14px; } /* controlli della mappa in ANALISI: dinamica, velocità, overlay */ .an-map-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; } .an-map-ctrl .seg button { padding: 5px 8px; } .an-map-ctrl .btn.on { border-color: var(--accent); color: var(--accent); background: #1e2410; } /* ---------- MENTAL ---------- */ /* Tutti i campi testuali dell'area mental: larghezza piena e crescita in altezza col contenuto (auto-grow via JS: qui si toglie solo il resize manuale e lo scroll interno che taglierebbe il testo). */ #view-mental textarea { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; min-height: 64px; line-height: 1.55; font-size: .95rem; } /* testo scritto dagli utenti: va SEMPRE a capo, mai tagliato */ .mc-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; } /* ---- portale allievo: caratteri più grandi, questionario "da modulo" ---- */ #mc-student { font-size: 1rem; } #mc-student .card { padding: 24px 28px; } #mc-student h2.section { font-size: .92rem; margin-bottom: 12px; } #mc-student textarea { font-size: 1.02rem; min-height: 84px; } #mc-student .note { font-size: .95rem; line-height: 1.55; padding: 14px 16px; } #mc-student .btn { font-size: .84rem; padding: 9px 18px; } #mc-student .btn.primary { font-size: .9rem; } /* card del singolo questionario nel portale */ .mcq-card { background: var(--card2); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 12px 0; } .mcq-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mcq-head b { font-size: 1.12rem; letter-spacing: .01em; } .mcq-head .muted { font-size: .78rem; } .mcq-intro { color: #d6d6d6; font-size: .98rem; line-height: 1.65; margin: 14px 0 4px; padding: 12px 16px; border-left: 3px solid var(--accent); background: #101208; border-radius: 0 10px 10px 0; white-space: pre-wrap; } /* singola domanda del modulo */ .mcq-q { margin: 22px 0; } .mcq-q .qtext { font-size: 1.05rem; font-weight: 600; line-height: 1.5; margin-bottom: 12px; } .mcq-q .qtext .qn { color: var(--accent); font-weight: 800; margin-right: 6px; } .mcq-q .qhint { font-weight: 400; font-size: .76rem; color: var(--dim); margin-left: 6px; } /* opzioni: una riga-bottone per risposta */ .mcq-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; margin: 8px 0; cursor: pointer; font-size: .98rem; line-height: 1.45; background: #0f0f0f; transition: border-color .12s, background .12s; } .mcq-opt:hover { border-color: #4a4a4a; } .mcq-opt.sel { border-color: var(--accent); background: #1a2007; } .mcq-opt input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; } /* scala 1..N: SLIDER + pallini numerati, tutto su UNA riga (mai a capo) */ .mcq-slide { margin-top: 6px; } .mcq-slide-val { font-size: .84rem; color: var(--dim); min-height: 34px; display: flex; align-items: center; gap: 6px; } .mcq-slide-val b { font-size: 1.5rem; color: var(--accent); line-height: 1; } .mcq-slide-val .of { color: var(--dim); font-size: .9rem; } /* barra: track con riempimento fino al valore scelto, pollice grande touch */ .mcq-range { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; --fill: 0%; } .mcq-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--accent) var(--fill), #2c2c2c var(--fill)); } .mcq-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); margin-top: -11px; border: 3px solid #0a0a0a; box-shadow: 0 0 0 1px var(--accent); } .mcq-range::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--accent) var(--fill), #2c2c2c var(--fill)); } .mcq-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid #0a0a0a; } /* pallini numerati sotto la barra: toccabili, MAI a capo */ .mcq-slide-dots { display: flex; justify-content: space-between; gap: 2px; flex-wrap: nowrap; margin-top: 2px; } .mcq-slide-dots .d { flex: 0 1 32px; min-width: 22px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .74rem; color: var(--dim); cursor: pointer; user-select: none; } .mcq-slide-dots .d.lt { color: var(--txt); } .mcq-slide-dots .d.sel { background: var(--accent); color: #111; font-weight: 800; } /* significato degli estremi: una riga DEDICATA per estremo, mai a capo */ .mcq-slide-ends { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; } .mcq-slide-ends .e { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; color: var(--dim); } .mcq-slide-ends .e b { color: var(--txt); font-size: .9rem; } /* commento del mental coach nello storico allievo: ben visibile */ #mc-student .qa-answer { font-size: .98rem; line-height: 1.6; } /* builder (lato coach): una riga per ogni risposta possibile */ .mce-opt-row { display: flex; gap: 6px; align-items: center; margin: 5px 0; } .mce-opt-row input[type="text"] { flex: 1; } .mce-opt-row .opt-del { color: var(--bad); cursor: pointer; font-weight: 800; font-size: 1rem; padding: 0 8px; user-select: none; } /* ---- scambio DOMANDA/RISPOSTA (portale e area mental): due blocchi ben distinti — domanda su fondo scuro con bordo blu, risposta del coach su fondo verde scuro con bordo accento, etichette maiuscole a targhetta ---- */ .mcqa-item { background: var(--card2); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; overflow: hidden; } .mcqa-q { padding: 14px 18px 12px; background: #101318; border-left: 4px solid var(--blue); } .mcqa-a { padding: 14px 18px 12px; background: #151a08; border-left: 4px solid var(--accent); border-top: 1px solid var(--border); } .mcqa-tag { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; padding: 3px 10px; border-radius: 10px; } .mcqa-q .mcqa-tag { color: var(--blue); border: 1px solid rgba(122, 167, 255, .55); background: rgba(122, 167, 255, .08); } .mcqa-a .mcqa-tag { color: #111; background: var(--accent); } .mcqa-text { font-size: .98rem; line-height: 1.6; color: var(--txt); white-space: pre-wrap; overflow-wrap: anywhere; } .mcqa-meta { color: var(--dim); font-size: .7rem; margin-top: 8px; } .mcqa-wait { padding: 10px 18px; color: var(--warn); font-size: .76rem; border-top: 1px dashed var(--border); letter-spacing: .02em; } /* blocco risposta usato da solo (es. commento del coach nello storico) */ .mcqa-a.solo { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; margin-top: 10px; } /* portale allievo: due colonne che sfruttano la larghezza della pagina (sinistra: questionari e storico · destra: check-in e domande) */ /* portale allievo: sottomenu della pagina mental (una sezione alla volta) */ .mc-st-tabs { display: flex; width: 100%; margin: 0 auto 14px; } .mc-st-tabs button { flex: 1 1 0; min-height: 42px; font-size: .72rem; letter-spacing: .04em; } /* Allievo su SMARTPHONE: ANALISI e TRACKMAP hanno bisogno di spazio (grafici, mappa, timeline) e sul telefono diventavano inutilizzabili — al posto dei contenuti compare l'avviso "accedi da tablet o PC". */ .phone-block { display: none; } @media (max-width: 700px) { body.student-portal #view-analysis > *:not(.phone-block), body.student-portal #view-trackmap > *:not(.phone-block) { display: none !important; } body.student-portal #view-analysis .phone-block, body.student-portal #view-trackmap .phone-block { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 48px 20px; margin: 24px auto; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; } .phone-block .pb-ico { font-size: 2.6rem; } .phone-block b { font-size: 1rem; } .phone-block span { color: var(--dim); font-size: .85rem; line-height: 1.5; } } .mc-st-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; } .mc-st-grid > div > .card { margin-bottom: 14px; } @media (max-width: 980px) { .mc-st-grid { grid-template-columns: 1fr; } } /* popup di compilazione questionario (portale allievo) */ #mc-quest-modal { position: fixed; inset: 0; z-index: 240; display: none; font-size: 1rem; } #mc-quest-modal.on { display: block; } #mc-quest-modal .mcm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); } #mc-quest-modal .mcm-panel { position: absolute; left: 50%; transform: translateX(-50%); top: 4vh; max-height: 92vh; width: min(860px, 94vw); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); } #mc-quest-modal .mcm-close { position: sticky; top: 0; float: right; z-index: 5; } #mc-quest-modal .mcm-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; } #mc-quest-modal textarea { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; min-height: 84px; line-height: 1.55; font-size: 1.02rem; } @media (max-width: 700px) { #mc-quest-modal .mcm-panel { top: 2vh; max-height: 96vh; padding: 14px; } } /* ---------- MENTAL COACH: revisione compilazioni in blocchi leggibili ---------- */ .mc-sub-answers { margin-top: 12px; } /* ---------- MENTAL COACH: liste questionari / allievi più ariose ---------- */ #mc-pane .notes-list .note { padding: 14px 18px; border-radius: 10px; margin-bottom: 10px; font-size: .9rem; } #mc-pane .notes-list .note > div:first-child b { font-size: 1.02rem; } #mc-pane table.list td { padding: 11px 12px; font-size: .92rem; } #mc-pane table.list th { padding: 9px 12px; } #mc-pane .qa-msg .qm-from { font-size: .92rem; } /* ---------- PILOTI: elenco e dettaglio più professionali e leggibili ---------- */ #view-pilots table.list td { padding: 11px 12px; font-size: .92rem; } #view-pilots table.list th { padding: 9px 12px; } #pilot-detail { font-size: .94rem; } #pilot-detail .section, #mc-pilot-panel .section { margin-top: 18px; } #pilot-detail .notes-list .note, #mc-pilot-panel .notes-list .note, #session-detail .notes-list .note { padding: 12px 16px; line-height: 1.55; font-size: .9rem; } .pilot-head h3 { letter-spacing: .02em; } .pilot-head .muted { font-size: .82rem; } /* ---------- AREA MENTAL: TEST COGNITIVI (mini-giochi) ---------- */ #mcg-overlay { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: none; flex-direction: column; /* niente doppio-tap zoom dentro l'overlay (i giochi sono a tap veloci) */ touch-action: manipulation; } #mcg-overlay.on { display: flex; } /* a gioco AVVIATO: nessun gesto del browser (scroll/pinch) — solo i tap */ #mcg-overlay[data-running="1"] { touch-action: none; } #mcg-overlay[data-running="1"] .mcg-body { overflow: hidden; } /* overlay aperto: la pagina dietro resta ferma (niente scroll di rimbalzo) */ body.mcg-lock { overflow: hidden !important; } body.mcg-lock main { overflow: hidden !important; } .mcg-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--card); flex: 0 0 auto; } .mcg-flag { width: 24px; height: 17px; border-radius: 3px; border: 1px solid var(--border); background: repeating-conic-gradient(#fff 0% 25%, #141414 0% 50%) 0 0/8px 8px; } .mcg-title { font-weight: 800; letter-spacing: .04em; } .mcg-status { margin-left: auto; color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; } .mcg-quit { padding: 6px 12px; } .mcg-body { flex: 1; overflow: auto; position: relative; display: flex; flex-direction: column; } .mcg-screen { max-width: 600px; margin: 0 auto; padding: 26px 20px 44px; text-align: center; width: 100%; } .mcg-bigicon { font-size: 3.2rem; margin-top: 8px; } .mcg-h { font-size: 1.4rem; margin: 8px 0 2px; } .mcg-tagline { color: var(--accent); font-size: .7rem; letter-spacing: .18em; font-weight: 800; margin-bottom: 16px; } .mcg-instr { text-align: left; background: var(--card2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 16px 18px; line-height: 1.6; font-size: .98rem; } .mcg-plist { margin-top: 10px; color: var(--dim); font-size: .85rem; } .mcg-plist b { color: var(--accent); } .mcg-start { margin-top: 22px; padding: 16px 46px; font-size: 1.05rem; letter-spacing: .06em; } .mcg-check { width: 56px; height: 56px; margin: 14px auto 0; border-radius: 50%; border: 3px solid var(--accent); position: relative; } .mcg-check::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.8rem; font-weight: 900; } .mcg-res { margin: 16px 0 4px; } .mcg-res-row { display: flex; justify-content: space-between; align-items: center; background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; margin: 8px 0; font-size: 1rem; } .mcg-res-row b { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 1.1rem; } .mcg-send { color: var(--dim); font-size: .85rem; margin: 10px 0; } .mcg-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } /* STROOP */ .mcg-stroop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px, 6vh, 48px); padding: 20px; } .mcg-word-card { background: #f4f4f4; border-radius: 18px; padding: clamp(24px, 6vh, 40px) 20px; width: min(92vw, 500px); text-align: center; transition: background .15s; box-shadow: 0 6px 24px #0008; } .mcg-word-card.err { background: #ffb4b0; } .mcg-word-card span { font-size: clamp(2.2rem, 10vw, 3.6rem); font-weight: 900; letter-spacing: .04em; } .mcg-dots { display: flex; gap: clamp(8px, 2.5vw, 16px); flex-wrap: wrap; justify-content: center; } .mcg-dot { width: clamp(52px, 13vw, 70px); height: clamp(52px, 13vw, 70px); border-radius: 50%; border: 3px solid #555; cursor: pointer; } .mcg-dot:active { transform: scale(.9); } /* SCHULTE */ .mcg-schulte-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; gap: 10px; } .mcg-next { color: var(--dim); font-size: .9rem; } .mcg-next b { color: var(--accent); font-size: 1.15rem; } .mcg-schulte { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: min(94vw, 72vh, 560px); } .mcg-cell { aspect-ratio: 1; background: var(--card2); border: 1px solid var(--border); border-radius: 8px; color: var(--txt); font-size: clamp(.9rem, 3.6vw, 1.35rem); font-weight: 700; cursor: pointer; } .mcg-cell.ok { background: #1d4d1d; border-color: #2ecc40; } .mcg-cell.ko { background: #5b1a1a; border-color: var(--bad); } /* GO-NO GO */ .mcg-gng { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; cursor: pointer; user-select: none; } .mcg-gng.red { background: #3d0d0d; } .mcg-gng.green { background: #0c3d15; } .mcg-gng.false { background: #601c1c; } .mcg-gng.ok { background: #17240c; } /* modalità A TEMPO: solo colori, pieni e ben distinguibili */ .mcg-gng.bare.red { background: #b31212; } .mcg-gng.bare.green { background: #12a832; } /* premuto sul rosso: SOLO un lampo più rosso, nessuna scritta */ .mcg-gng.bare.errflash { background: #ff0f0f; box-shadow: inset 0 0 0 8px #ff5a5a; } .mcg-lights { display: flex; gap: clamp(8px, 2.5vw, 14px); } .mcg-lights .lt { width: clamp(30px, 8vw, 46px); aspect-ratio: 1; border-radius: 50%; background: #222; border: 2px solid #000; transition: background .05s; } .mcg-lights.lit .lt { background: #ff2020; box-shadow: 0 0 20px #ff2020aa; } .mcg-gng.green .lt { background: #2ecc40; box-shadow: 0 0 20px #2ecc40aa; } .mcg-gng-msg { font-size: clamp(1.6rem, 9vw, 2.8rem); font-weight: 900; letter-spacing: .06em; } .mcg-gng-sub { color: #cfcfcf; font-size: .9rem; padding: 0 20px; text-align: center; } /* CHIMP */ .mcg-chimp-wrap { flex: 1; display: flex; flex-direction: column; padding: 10px; gap: 8px; } .mcg-chimp-info { display: flex; align-items: center; justify-content: space-between; color: var(--dim); font-size: .85rem; } .mcg-chimp { position: relative; flex: 1; border: 1px solid var(--border); border-radius: 12px; background: var(--card); min-height: 62vh; transition: background .15s; } .mcg-chimp.err { background: #2c1010; } .mcg-chimp.okflash { background: #16240c; } .mcg-block { position: absolute; width: clamp(48px, 13vw, 66px); aspect-ratio: 1; background: #f2f2f2; border-radius: 10px; border: 2px solid #999; font-size: 1.35rem; font-weight: 900; color: #111; cursor: pointer; } .mcg-block.done { opacity: .22; pointer-events: none; } /* AIM */ .mcg-aim { flex: 1; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, #161616 0%, var(--bg) 70%); } .mcg-target { position: absolute; width: clamp(58px, 15vw, 84px); aspect-ratio: 1; border-radius: 50%; cursor: pointer; border: 4px solid #ddd; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, #3d3d3d 0 30%, #101010 30% 62%, #2c2c2c 62% 100%); box-shadow: 0 0 16px #000c; } .mcg-target span { font-size: 1.6rem; pointer-events: none; } .mcg-target:active { transform: scale(.88); } /* ---- PORTALE ALLIEVO: una CARD per test (griglia) ---- */ .mcg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .mcg-row { display: flex; flex-direction: column; gap: 10px; background: var(--card2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; } .mcg-row.off { opacity: .65; } .mcg-row-top { display: flex; align-items: center; gap: 12px; } .mcg-row .gi { font-size: 1.9rem; line-height: 1; } .mcg-row .gn { font-weight: 800; font-size: 1.02rem; } .mcg-row .gt, .mcg-cfg-row .gt { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-top: 2px; } .mcg-row .gd { color: var(--dim); font-size: .8rem; line-height: 1.5; } .mcg-row-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } .mcg-mini { font-size: .66rem; font-weight: 700; letter-spacing: .04em; color: var(--dim); border: 1px solid var(--border); border-radius: 9px; padding: 3px 10px; white-space: nowrap; } .mcg-mini.warn { color: var(--warn); border-color: var(--warn); } .mcg-mini.bad { color: var(--bad); border-color: var(--bad); } .mcg-play { padding: 12px 24px; font-weight: 800; width: 100%; } /* portale allievo: storico risultati DIETRO menu (chiuso di default) */ .mcg-st-hist { margin-top: 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .02); overflow: hidden; } .mcg-st-hist-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; background: transparent; border: 0; color: var(--txt); cursor: pointer; text-align: left; font-size: .95rem; } .mcg-st-hist-btn .chev { color: var(--accent); font-size: 1.1rem; font-weight: 800; } .mcg-st-hist-btn.open { border-bottom: 1px solid var(--border); } .mcg-st-hist-body { padding: 14px 14px 16px; } .mcg-st-lesson { margin-top: 8px; } .mcg-st-reslist { display: flex; flex-direction: column; gap: 10px; } .mcg-st-res { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .mcg-st-res.best { border-color: rgba(204, 255, 0, .45); background: rgba(204, 255, 0, .05); } .mcg-st-res-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; } /* ---- COACH: barra corso + griglia card di attivazione ---- */ .mcg-course-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .mcg-course-lbl { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-right: 4px; } .mcg-cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; } .mcg-cfg-row { display: flex; flex-direction: column; background: var(--card2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; } .mcg-cfg-row.on { border-color: rgba(204, 255, 0, .55); } .mcg-cfg-top { display: flex; align-items: center; gap: 12px; } .mcg-cfg-top .gi { font-size: 1.7rem; line-height: 1; } .mcg-cfg-top .gd { min-width: 0; } .mcg-cfg-top .gn { font-weight: 800; font-size: .96rem; } .mcg-cfg-desc { color: var(--dim); font-size: .76rem; line-height: 1.5; margin-top: 8px; } .mcg-cfg-fields { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); } /* campo etichettato (etichetta piccola sopra, input sotto): usato nelle card di attivazione e nella barra filtri della classifica */ .mcg-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 110px; min-width: 0; } .mcg-field > span { font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } .mcg-field input, .mcg-field select { width: 100%; } .mcg-field .course-chip { align-self: flex-start; } /* interruttore ATTIVO/SPENTO */ .mcg-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-left: auto; } .mcg-switch input { display: none; } .mcg-switch .sl { width: 42px; height: 23px; border-radius: 12px; background: #2c2c2c; border: 1px solid var(--border); position: relative; transition: background .15s, border-color .15s; flex: 0 0 auto; } .mcg-switch .sl::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #808080; transition: left .15s, background .15s; } .mcg-switch input:checked + .sl { background: rgba(204, 255, 0, .22); border-color: var(--accent); } .mcg-switch input:checked + .sl::after { left: 21px; background: var(--accent); } .mcg-switch .st { font-size: .62rem; font-weight: 800; letter-spacing: .1em; color: var(--dim); } .mcg-cfg-row.on .mcg-switch .st { color: var(--accent); } /* tab di scelta del test per la classifica */ .mcg-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .mcg-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; background: var(--card2); border: 1px solid var(--border); border-radius: 11px; color: var(--dim); font-size: .74rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; } .mcg-tabs button .gi { font-size: 1rem; } .mcg-tabs button.on { color: #111; background: var(--accent); border-color: var(--accent); } .mcg-tabs button .cnt { font-size: .62rem; font-weight: 800; margin-left: 4px; background: rgba(255, 255, 255, .12); border-radius: 8px; padding: 1px 7px; } .mcg-tabs button.on .cnt { background: rgba(0, 0, 0, .18); } /* barra filtri della classifica */ .mcg-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; background: rgba(255, 255, 255, .02); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .mcg-toolbar .mcg-field { flex: 0 1 auto; } .mcg-toolbar .mcg-field.grow { flex: 1 1 200px; } /* leaderboard: righe zebrate, colonna di ordinamento evidenziata, podio */ #mcg-lb table.list th { cursor: pointer; user-select: none; white-space: nowrap; font-size: .72rem; padding: 10px 12px; } #mcg-lb table.list th.on { color: var(--accent); } #mcg-lb table.list td { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .88rem; padding: 11px 12px; } #mcg-lb table.list tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); } #mcg-lb table.list tr.sel { outline: 1px solid var(--accent); } .mcg-pos { font-weight: 800; color: var(--dim); } .mcg-pos.p1 { color: #ffd558; } .mcg-pos.p2 { color: #cfd6e4; } .mcg-pos.p3 { color: #e09a5a; } .mcg-name { font-weight: 700; } td.mcg-main { color: var(--accent); font-weight: 800; } #mcg-lb table.list tbody tr:hover { background: rgba(204, 255, 0, .06); } #mcg-lb table.list th { text-transform: uppercase; letter-spacing: .06em; color: var(--dim); } #mcg-lb table.list th.on { color: var(--accent); } .course-chip.big { font-size: .84rem; padding: 8px 20px; } /* metriche di un risultato come chip etichettati (dettaglio + portale allievo) */ .mcg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .mcg-chip { display: inline-flex; align-items: baseline; gap: 7px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; } .mcg-chip .k { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); } .mcg-chip b { font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--txt); } /* dettaglio allievo del mental coach: sezioni separate in blocchi */ /* sotto-menu del dettaglio: una sezione alla volta */ .mcp-tabs { display: flex; flex-wrap: wrap; margin: 10px 0 2px; } .mcp-tabs button { flex: 1 1 auto; padding: 10px 12px; font-size: .72rem; white-space: nowrap; } .mcp-block { background: var(--card2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin: 14px 0; } .mcp-block > .section { margin-top: 0; } .mcp-game { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 8px 0; background: rgba(255, 255, 255, .02); } .mcp-game-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .mcp-game-head .gi { font-size: 1.2rem; } .mcp-game-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 5px 0; border-top: 1px dashed var(--border); } /* storico tentativi per gioco: mini-tabella con le colonne della classifica */ .mcp-gtable th { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); white-space: nowrap; padding: 7px 10px; } .mcp-gtable td { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .82rem; padding: 7px 10px; } .mcp-gtable tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); } .mcp-gtable tbody tr.best { background: rgba(204, 255, 0, .07); } /* dettaglio allievo: risultati di un test DIVISI PER LEZIONE */ .mcp-lesson { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: rgba(255, 255, 255, .02); } .mcpl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .mcpl-best { display: inline-block; font-size: .56rem; font-weight: 800; letter-spacing: .1em; color: #111; background: var(--accent); border-radius: 8px; padding: 1px 7px; vertical-align: 1px; margin-left: 5px; } /* diario + check-in del coach: una card per GIORNATA su due colonne */ .mcp-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mcp-day { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .mcpd-head { font-weight: 800; font-size: .8rem; text-transform: capitalize; letter-spacing: .03em; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 7px; margin-bottom: 4px; } .mcpd-item { padding: 9px 0; border-bottom: 1px dashed var(--border); } .mcpd-item:last-child { border-bottom: 0; padding-bottom: 2px; } .mcpd-item .mc-text { margin-top: 5px; font-size: .86rem; } /* risposta in sola lettura (popup allievo + revisione del mental coach): stesso formato ovunque — domanda numerata grande, risposta in un riquadro con bordo accent */ .mcq-read-a { margin-top: 8px; padding: 12px 16px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-left: 3px solid var(--accent); font-size: .98rem; line-height: 1.6; } /* riquadri DA COMMENTARE (mental coach): bordo giallo + badge, si vedono a colpo d'occhio in Compilazioni, Questionari e nel dettaglio pilota */ .mc-todo { border-color: rgba(255, 179, 0, .65) !important; border-left: 4px solid var(--warn) !important; } .mc-todo-tag { display: inline-block; font-size: .6rem; font-weight: 800; letter-spacing: .1em; color: #111; background: var(--warn); border-radius: 9px; padding: 2px 9px; white-space: nowrap; vertical-align: 1px; } /* rilettura a SCELTE: tutte le opzioni del modulo, le selezionate accese */ .mcq-read-opts { margin-top: 8px; } .mcq-opt.ro { cursor: default; padding: 10px 14px; margin: 6px 0; } .mcq-opt.ro:hover { border-color: var(--border); } .mcq-opt.ro.sel:hover { border-color: var(--accent); } .mcq-opt.ro .ck { width: 20px; flex: 0 0 auto; text-align: center; color: var(--accent); font-weight: 800; } .mcq-opt.ro:not(.sel) { opacity: .72; } /* rilettura a SCALA: fila completa 1..N col valore scelto acceso */ .mcq-read-scale { margin-top: 8px; } .mcq-read-scale .dots { display: flex; gap: 6px; flex-wrap: wrap; } .mcq-read-scale .d { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 9px; color: var(--dim); font-weight: 700; font-variant-numeric: tabular-nums; background: #0f0f0f; } .mcq-read-scale .d.sel { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 800; } .mcq-read-scale .ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: .7rem; color: var(--dim); } .mcq-read-scale .ends span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* diario di lezione: pagina ancora chiusa (si sblocca dopo l'esame) */ .mc-diary-locked { opacity: .72; } @media (max-width: 700px) { .mcg-play { padding: 12px 16px; min-height: 48px; } .mcg-list, .mcg-cfg-grid { grid-template-columns: 1fr; } .mcg-toolbar .mcg-field { flex: 1 1 45%; } .mcp-days { grid-template-columns: 1fr; } } /* ========================================================================== SMARTPHONE — esperienza da app per l'ALLIEVO (e ritocchi generali touch) ========================================================================== */ @media (max-width: 700px) { /* campi >= 16px: iOS non fa più lo zoom automatico quando si tocca un input */ select, input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], textarea { font-size: 16px; } .login-card input { font-size: 16px; } /* più spazio utile: margini e padding compatti, target touch >= 44px */ main { padding: 10px 10px 18px; } /* la PAGINA scorre solo in verticale: niente traslazioni laterali — i contenuti larghi (tabelle, classifiche) scorrono DENTRO card e .scroll-x */ main { overflow-x: hidden; touch-action: pan-y; } main .card, main .scroll-x { touch-action: pan-x pan-y; } /* ANALISI: sul grafico telemetrico il dito comanda il CURSORE, non la pagina — niente scroll né zoom mentre lo si tocca (come nei giochi) */ #overlay-canvas, .an-gm-graph { touch-action: none; } .card { padding: 14px 12px; border-radius: 12px; } .btn { min-height: 44px; } .seg button { padding: 10px 12px; min-height: 40px; } .topbar { padding: 8px 10px; gap: 6px 10px; } .topbar .brand { font-size: .86rem; } .topbar .status { font-size: .7rem; gap: 8px; } /* tabelle: celle leggibili senza sforare (la card scorre in orizzontale) */ table.list th { padding: 8px 8px; font-size: .64rem; } table.list td { padding: 9px 8px; } /* intestazioni con dentro filtri e comandi (es. Andamento, Sessioni della scheda pilota): righe ariose e spiegazione su una riga propria */ h2.section { line-height: 2; } h2.section > .muted { display: block; margin-top: 2px; line-height: 1.5; } #pd-trend-courses, #pd-trend-mode { margin-left: 0 !important; } /* tabella sessioni del pilota: tipologia (OPENDAY / ESAME / corso) su UNA riga — niente a capo dentro la cella, la tabella scorre in orizzontale */ #pilot-sessions th, #pilot-sessions td { white-space: nowrap; } #pilot-sessions .sess-type, #pilot-sessions .lap-chip { white-space: nowrap; } /* modale dettaglio sessione e popup questionario già a tutto schermo */ } /* ---- SMARTPHONE: navigazione in basso stile app (allievo, coach, admin) ---- */ @media (max-width: 700px) { /* in alto restano brand, utente e Esci; i tab scendono in basso a portata di pollice (come sul portale allievo). Con tanti menu (admin) la barra scorre in orizzontale senza stringere le voci. */ #app.on .topbar .status > span:first-child { display: none; } #app.on .topbar { padding-bottom: 6px; } #app.on .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex: none; background: #0d0d0d; border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0, 0, 0, .55); } #app.on .tabs button { flex: 1 0 auto; min-width: 58px; max-width: 88px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; border-radius: 10px; font-size: .52rem; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; } #app.on .tabs button::before { font-size: 1.25rem; line-height: 1.15; filter: grayscale(.35) brightness(.9); } #app.on .tabs button.active::before { filter: none; } #app.on .tabs button[data-view="live"]::before { content: '📡'; } #app.on .tabs button[data-view="analysis"]::before { content: '📊'; } #app.on .tabs button[data-view="trackmap"]::before { content: '🗺️'; } #app.on .tabs button[data-view="pilots"]::before { content: '🏎️'; } #app.on .tabs button[data-view="questions"]::before { content: '💬'; } #app.on .tabs button[data-view="mental"]::before { content: '🧠'; } #app.on .tabs button[data-view="staff"]::before { content: '📋'; } #app.on .tabs button[data-view="users"]::before { content: '👤'; } #app.on .tabs button[data-view="settings"]::before { content: '⚙️'; } #app.on .tabs button[data-view="guide"]::before { content: '📖'; } #app.on .tabs button.active { background: #1e2410; color: var(--accent); } /* contatore in sovraimpressione nell'angolo del tab: l'icona e il testo restano fermi, il numero colorato si appoggia sopra */ #app.on .tabs .tab-badge { position: absolute; top: 2px; right: 4px; left: auto; transform: none; margin: 0; z-index: 1; box-shadow: 0 0 0 2px #0d0d0d; } #app.on main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); } #app.on .tm-frame.tm-full { height: calc(100dvh - 200px); } /* coach/admin: layout a una colonna, tab e filtri a tutta larghezza */ .two-col { gap: 10px; } .qa-mail { gap: 10px; } #mc-tabs { max-width: none !important; width: 100%; flex-wrap: wrap; } #mc-tabs button { flex: 1 1 42%; min-height: 42px; font-size: .68rem; } .mcp-tabs { width: 100%; } .mcp-tabs button { flex: 1 1 42%; min-height: 42px; font-size: .66rem; } .mcg-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .mcg-tabs button { flex: 0 0 auto; white-space: nowrap; } .mcg-course-bar { gap: 6px; } .mcg-course-bar .course-chip.big { font-size: .74rem; padding: 7px 12px; } .mcg-toolbar { padding: 10px; } .mcg-toolbar .mcg-field { flex: 1 1 100%; } .mcg-cfg-grid { grid-template-columns: 1fr; } /* drawer alert: a tutta larghezza sullo smartphone */ #alerts-drawer { width: min(100vw, 380px); max-width: 100vw; } #alerts-tab { right: 0; top: auto; bottom: calc(86px + env(safe-area-inset-bottom)); flex-direction: row; padding: 8px 12px; border-radius: 10px 0 0 10px; } #alerts-tab .at-label { writing-mode: horizontal-tb; text-orientation: mixed; letter-spacing: .08em; } /* tabelle utenti / classifica / sessioni: scroll orizzontale nella card */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } #view-users table.list th, #view-users table.list td, #mcg-lb table.list th, #mcg-lb table.list td { white-space: nowrap; } /* scheda pilota su telefono: celle compatte, la tabella sessioni non deve sforare a destra oltre lo schermo */ #view-pilots table.list { font-size: .74rem; } #view-pilots table.list th, #view-pilots table.list td { padding: 7px 4px; } /* LIVE: card a tutta larghezza, comandi non compressi */ .stations-grid { grid-template-columns: 1fr; } .st-card.expanded { grid-column: 1 / -1; } .st-head { flex-wrap: wrap; } /* ANALISI: controlli mappa e selettori a capo */ .an-map-ctrl { flex-wrap: wrap; gap: 8px; } .an-map-ctrl label { font-size: .78rem; } } /* ---- ALLIEVO su smartphone: area MENTAL e DOMANDE ---- */ @media (max-width: 700px) { #mc-student { font-size: .95rem; } #mc-student .card { padding: 16px 14px; } .mc-st-grid { gap: 10px; } /* sottomenu su due righe piene: cinque voci su una riga si schiacciavano */ .mc-st-tabs { flex-wrap: wrap; } .mc-st-tabs button { flex: 1 1 30%; min-height: 44px; font-size: .64rem; border-bottom: 1px solid var(--border); } /* niente tagli a destra: i testi lunghi vanno a capo dentro le card */ #mc-student .mc-text, #mc-student .note, #mc-student .mcqa-text, #mc-student .mcg-st-res, #mc-student .mcq-card { min-width: 0; overflow-wrap: anywhere; } #mc-student .mcg-chips { flex-wrap: wrap; } #mc-student .mcg-chip { white-space: normal; } /* selettore Check-in/Check-out: due righe piene, non schiacciato */ #mc-ci-kind { max-width: none !important; width: 100%; flex-wrap: wrap; } #mc-ci-kind button { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--border); } #mc-ci-kind button:last-child { border-bottom: 0; } /* scala 1–10: pallini compatti che restano su UNA riga anche a 320px */ .mcq-slide-dots .d { min-width: 20px; font-size: .7rem; } /* riga del test: pulsante GIOCA a tutta larghezza, facile col pollice */ .mcg-row { gap: 10px; } .mcg-play { flex: 1 1 100%; margin-left: 0; min-height: 48px; } .mcg-st-hist-btn { min-height: 52px; padding: 14px 12px; } /* Q&A: tab COACH DRIVER / COACH MENTAL a tutta larghezza */ #qa-st-tabs { width: 100%; } #qa-st-tabs button { flex: 1 1 0; min-height: 44px; } .mcqa-q, .mcqa-a { padding: 12px 12px; } /* popup questionario: pulsanti d'invio comodi anche col telefono in mano */ #mc-quest-modal .mcm-panel { padding: 14px 12px calc(16px + env(safe-area-inset-bottom)); } #mc-quest-modal .btn { min-height: 48px; } /* overlay dei test cognitivi: barra superiore compatta + zona sicura */ .mcg-top { padding: 8px 10px calc(8px); } #mcg-overlay { padding-bottom: env(safe-area-inset-bottom); } }