/* * ============================================= * QR LAYOUT OVERRIDE — preventionhub * Da includere DOPO customize.css nel * Non tocca logica JS né IDs esistenti. * ============================================= */ /* ── 0. VARIABILI DI COLORE ─────────────────────────────────── */ :root { --ph-blue: #0066cc; --ph-blue-light: #e8f1fb; --ph-blue-dark: #004a99; --ph-accent: #00a878; /* verde conferma */ --ph-warning: #e85d04; --ph-surface: #f7f9fc; --ph-border: #dce4ef; --ph-text: #1a2540; --ph-text-muted: #6b7a99; --ph-radius: 10px; --ph-shadow: 0 2px 12px rgba(0,102,204,.10); --ph-shadow-md: 0 4px 24px rgba(0,102,204,.15); --ph-transition: .18s ease; } /* ── 1. SFONDO GENERALE ─────────────────────────────────────── */ body { background-color: #eef2f8 !important; color: var(--ph-text); } /* ── 2. CONTAINER PRINCIPALE ────────────────────────────────── */ .sha-form { max-width: 880px; margin: 0 auto; } /* ── 3. TESTATA CLIENTE ─────────────────────────────────────── */ section#testata_nome .rounded.p-3.shadow { border-radius: var(--ph-radius) !important; box-shadow: var(--ph-shadow-md) !important; background: #fff; border-top: 4px solid var(--ph-blue); margin-bottom: 1.5rem; } section#testata_nome .clr-skin-primary-light-bg { background: var(--ph-blue-light) !important; border-radius: 8px; } section#testata_nome h4 { font-size: 1.15rem; color: var(--ph-blue-dark); margin-bottom: .25rem; } section#testata_nome h6 { font-size: .82rem; color: var(--ph-text-muted); margin-bottom: .15rem; } /* ── 4. TITOLI DI SEZIONE (row-title-divider) ───────────────── */ .row-title-divider { background: #fff; border-radius: var(--ph-radius) var(--ph-radius) 0 0; padding: 1.4rem 1.8rem 1rem; margin-bottom: 0; border-left: 5px solid var(--ph-blue); box-shadow: var(--ph-shadow); } .row-title-divider h4 { font-size: 1.05rem !important; color: var(--ph-blue-dark) !important; border-bottom-color: var(--ph-border) !important; margin-bottom: .6rem !important; } .row-title-divider h4 small small { color: var(--ph-text-muted); line-height: 1.5; display: block; margin-top: .4rem; } /* ── 5. RIGHE DOMANDA (row-sha-form) ────────────────────────── */ .row-sha-form { background: #fff; border-radius: 0; padding: 1.1rem 1.8rem; border-bottom: 1px solid var(--ph-border); transition: background var(--ph-transition); } /* Prima riga dopo il titolo */ .row-title-divider + .row-sha-form, .row-title-divider + * .row-sha-form:first-child { border-top: none; } /* Hover leggero sulla riga */ .row-sha-form:hover { background: #fafcff; } /* Ultima riga di ogni blocco arrotondata in basso */ .row-sha-form:last-of-type, .row-sha-btn { border-radius: 0 0 var(--ph-radius) var(--ph-radius); border-bottom: none; box-shadow: var(--ph-shadow); } /* ── 6. LABEL (colonna sinistra) ────────────────────────────── */ .row-sha-form .col-form-label, .row-sha-form p.col-form-label { font-size: .88rem; color: var(--ph-text); font-weight: 500; line-height: 1.5; padding-top: .5rem; } .row-sha-form .col-form-label small { color: var(--ph-text-muted); font-weight: 400; display: block; margin-top: .15rem; } /* ── 7. ERRORE INLINE ───────────────────────────────────────── */ span[id^="span_err_"] { display: inline-block; margin-top: .35rem; font-size: .78rem !important; padding: 2px 8px; border-radius: 4px; font-weight: 600; letter-spacing: .01em; } /* ── 8. INPUT / SELECT ──────────────────────────────────────── */ .form-control, .form-group .form-control { border: 1.5px solid var(--ph-border); border-radius: 7px !important; background: var(--ph-surface); color: var(--ph-text); font-size: .9rem; height: auto; padding: .52rem .85rem; transition: border-color var(--ph-transition), box-shadow var(--ph-transition); } .form-control:focus { border-color: var(--ph-blue) !important; box-shadow: 0 0 0 3px rgba(0,102,204,.12) !important; background: #fff; outline: none; } .form-control[readonly], .form-control[disabled] { background: #eff2f7 !important; color: var(--ph-text-muted); cursor: not-allowed; } /* Select con freccia custom */ select.form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230066cc' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .85rem center !important; padding-right: 2.2rem !important; } /* textarea */ textarea.form-control { min-height: 90px; resize: vertical; } /* ── 9. CHECKBOX E RADIO CUSTOM ─────────────────────────────── */ input[type="checkbox"], input[type="radio"] { accent-color: var(--ph-blue); width: 16px; height: 16px; cursor: pointer; } /* ── 10. PULSANTI ───────────────────────────────────────────── */ .btn { border-radius: 7px !important; font-weight: 600; letter-spacing: .02em; font-size: .88rem; padding: .55rem 1.4rem; transition: all var(--ph-transition); } .btn-skin-p, .btn-skin-success, [class*="btn-skin-p"] { background: var(--ph-blue) !important; border-color: var(--ph-blue) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(0,102,204,.25); } .btn-skin-p:hover, .btn-skin-success:hover, [class*="btn-skin-p"]:hover { background: var(--ph-blue-dark) !important; border-color: var(--ph-blue-dark) !important; box-shadow: 0 4px 16px rgba(0,102,204,.35); transform: translateY(-1px); } /* Pulsante "Prosegui" / bottone principale */ #IdProsegui, [id^="IdProsegui"] { min-width: 160px; padding: .65rem 2rem; font-size: .95rem; } /* Pulsante disattivo */ #btnTerminaDisattivo, .btn[disabled], .btn.disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* ── 11. ROW BOTTONI (row-sha-btn) ──────────────────────────── */ .row-sha-btn { background: var(--ph-blue-light); padding: 1.2rem 1.8rem; border-top: 1px solid var(--ph-border); } /* ── 12. SEZIONE PAGINE (DivPage) ───────────────────────────── */ [id^="DivPage"] { background: transparent; margin-bottom: 2rem; } /* Separatore tra pagine visibile */ [id^="Sez_"] { display: block; height: 2.5rem; } /* ── 13. BLOCCO "CHI COMPILA" ───────────────────────────────── */ #contenitore_questionario_chicompila { background: #fff; border-radius: var(--ph-radius); box-shadow: var(--ph-shadow-md); overflow: hidden; margin-bottom: 1.5rem; } #contenitore_questionario_chicompila .row-title-divider { border-radius: 0; margin-bottom: 0; } /* ── 14. BLOCCO QUESTIONARIO PRINCIPALE ─────────────────────── */ #contenitore_questionario { background: #fff; border-radius: var(--ph-radius); box-shadow: var(--ph-shadow-md); overflow: hidden; margin-bottom: 1.5rem; } #contenitore_questionario .row-title-divider { border-radius: 0; } /* ── 15. PROGRESS / NAVIGAZIONE PAGINE ──────────────────────── */ /* Ancora non mostrata nel template ma pronta */ .ph-progress-bar { height: 4px; background: var(--ph-border); border-radius: 2px; margin-bottom: 1.5rem; overflow: hidden; } .ph-progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--ph-blue), var(--ph-accent)); border-radius: 2px; transition: width .4s ease; } /* ── 16. FOOTER ─────────────────────────────────────────────── */ .sec-footer.clr-skin-primary-middle-bg { margin-top: 3rem !important; } /* ── 17. ALERT / SWEETALERT override ───────────────────────── */ .swal2-popup { border-radius: var(--ph-radius) !important; font-family: inherit !important; } .swal2-confirm { background: var(--ph-blue) !important; border-radius: 7px !important; } /* ── 18. UPLOAD FILE ────────────────────────────────────────── */ [id^="Divque_file_"] { border: 2px dashed var(--ph-border); border-radius: 8px; padding: 1.2rem; background: var(--ph-surface); transition: border-color var(--ph-transition); margin-top: .5rem; } [id^="Divque_file_"]:hover { border-color: var(--ph-blue); } /* ── 19. RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 767px) { .row-sha-form { padding: .9rem 1rem; } .row-title-divider { padding: 1rem 1rem .75rem; } .row-sha-btn { padding: 1rem; } .btn-skin-p, #IdProsegui { width: 100%; text-align: center; } section#testata_nome .col-md-6 { margin-bottom: .75rem; } } /* ── 20. PRINT ──────────────────────────────────────────────── */ @media print { .row-sha-form { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; } .row-sha-btn, .print-none { display: none !important; } } .radio-yn-wrapper { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .4rem 0; } .radio-yn-label { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--ph-text); padding: .45rem .9rem; border: 1.5px solid var(--ph-border); border-radius: 6px; transition: all .15s ease; user-select: none; margin: 0; white-space: nowrap; flex-shrink: 0; } .radio-yn-label:hover { border-color: var(--ph-blue); background: var(--ph-blue-light); } .radio-yn-label input[type=radio] { accent-color: var(--ph-blue); width: 15px; height: 15px; margin: 0; } /* Stato selezionato */ .radio-yn-label.radio-yn-selected { border-color: var(--ph-blue); background: var(--ph-blue-light); color: var(--ph-blue-dark); font-weight: 600; } .radio-yn-label { } /* ── SLIDER PERCENTUALE ──────────────────────────────────────── */ .slider-pct-wrapper { display: flex; align-items: center; gap: .75rem; padding: .4rem 0; width: 100%; } .slider-pct { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--ph-border); outline: none; cursor: pointer; } .slider-pct::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ph-blue); cursor: pointer; box-shadow: 0 2px 6px rgba(0,102,204,.35); transition: transform .15s ease; } .slider-pct::-webkit-slider-thumb:hover { transform: scale(1.2); } .slider-pct::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ph-blue); cursor: pointer; border: none; box-shadow: 0 2px 6px rgba(0,102,204,.35); } .slider-pct-display { min-width: 52px; text-align: center; font-weight: 700; font-size: 1rem; color: var(--ph-blue-dark); background: var(--ph-blue-light); border-radius: 6px; padding: .25rem .6rem; } /* Span errore vuoto non occupa spazio */ span[id^="span_err_"]:empty { display: none; } /* Contenitore più largo */ .sha-form { max-width: 100% !important; } .sec-auto .container, section .container { max-width: 1200px !important; } /* I separatori di pagina non devono occupare spazio se la pagina successiva è nascosta */ [id^="Sez_"] { display: block; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Spazio sopra la pagina attiva — solo quella visibile */ [id^="DivPage"][style*="display: block"], [id^="DivPage"][style*="display:block"] { margin-top: 1.5rem; } /* ── BARRA NAVIGAZIONE PAGINE ────────────────────────────────── */ #ph-page-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: stretch; background: #fff; border-top: 2px solid var(--ph-border); box-shadow: 0 -4px 16px rgba(0,102,204,.12); height: 52px; padding: 0 .5rem; overflow-x: auto; } .ph-page-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; min-width: 60px; border: none; background: transparent; cursor: pointer; padding: .3rem .5rem; border-bottom: 3px solid transparent; transition: all .15s ease; color: var(--ph-text-muted); } .ph-page-btn:hover { background: var(--ph-blue-light); color: var(--ph-blue); } .ph-page-btn.active { border-bottom-color: var(--ph-blue); color: var(--ph-blue); background: var(--ph-blue-light); } .ph-page-num { font-size: .75rem; font-weight: 700; line-height: 1; } .ph-page-label { font-size: .65rem; white-space: nowrap; line-height: 1; } .ph-page-sep { width: 1px; background: var(--ph-border); margin: .5rem 0; flex-shrink: 0; } /* Spazio in fondo alla pagina per non coprire il contenuto */ body { padding-bottom: 60px; } @media (max-width: 576px) { .ph-page-label { display: none; } .ph-page-num { font-size: .85rem; } } .ph-page-btn.disabled { display: none; } input[maxlength="1"] { max-width: 45px; } input[maxlength="2"] { max-width: 50px; } input[maxlength="3"] { max-width: 65px; } input[maxlength="4"] { max-width: 70px; } input[maxlength="5"] { max-width: 80px; } input[maxlength="6"] { max-width: 85px; } input[maxlength="7"] { max-width: 100px; } input[maxlength="8"] { max-width: 100px; } input[maxlength="9"] { max-width: 100px; } input[maxlength="10"] { max-width: 110px; } input[maxlength="11"] { max-width: 110px; } input[maxlength="12"] { max-width: 110px; } input[maxlength="13"] { max-width: 110px; } input[maxlength="14"] { max-width: 130px; } input[maxlength="15"] { max-width: 130px; }