/* report.css — stili del sistema di segnalazione (report.jsx). Riusa .modal-overlay/.modal-panel/.modal-h da hih.css; aggiunge il contenuto. */ /* #report-root è montato su , FUORI da .hih: ridefinisco qui i token di tema (default Bright) così la modale ha sfondi/bordi corretti e non risulta trasparente. */ #report-root{ --r1:#FF3D6E; --r2:#FF8A2B; --r3:#FFC400; --r4:#2FCB6E; --r5:#16C7D6; --r6:#3B82F6; --r7:#7C5CFC; --r8:#E455C8; --accent:#2FCB6E; --surface:#FFFFFF; --surface-2:#F6F4FD; --border:rgba(28,20,55,.08); --line:rgba(28,20,55,.07); --text:#1C1830; --muted:#6E6886; --faint:#9b96ad; --radius:18px; --radius-sm:12px; --shadow:0 1px 2px rgba(28,20,55,.04),0 10px 26px rgba(28,20,55,.07); --shadow-sm:0 1px 2px rgba(28,20,55,.05),0 4px 12px rgba(28,20,55,.05); --fontH:'Fredoka',system-ui,sans-serif; --fontB:'Nunito',system-ui,sans-serif; font-family:var(--fontB); } .report-panel{max-width:460px} /* pulsante bandierina generico (usato dove non c'è già uno stile dedicato) */ .report-flag{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:transparent;border:none;color:var(--faint);font-size:15px;cursor:pointer;transition:.14s;line-height:1} .report-flag:hover{color:var(--r1);background:color-mix(in srgb,var(--r1) 12%,transparent)} /* soggetto segnalato */ .report-target{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:12px 14px;margin-bottom:18px} .report-target-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:#fff;background:var(--r1);flex:0 0 auto} .report-target-txt{min-width:0} .report-target-txt small{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:2px} .report-target-txt b{font-family:var(--fontB);font-weight:700;font-size:14px;color:var(--text);line-height:1.35} .report-target-name{color:var(--r6);font-weight:800} .report-q{display:block;font-family:var(--fontH);font-weight:600;font-size:15px;color:var(--text);margin-bottom:11px} /* lista motivi (radio) */ .report-reasons{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .report-reason{display:flex;align-items:flex-start;gap:12px;text-align:left;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.13s} .report-reason:hover{border-color:var(--muted);background:var(--surface-2)} .report-reason.is-on{border-color:var(--r1);background:color-mix(in srgb,var(--r1) 7%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--r1) 22%,transparent)} .report-radio{flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;margin-top:1px;transition:.13s} .report-reason.is-on .report-radio{border-color:var(--r1)} .report-radio-dot{width:9px;height:9px;border-radius:50%;background:var(--r1)} .report-reason-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .report-reason-txt b{font-family:var(--fontH);font-weight:600;font-size:14.5px;color:var(--text)} .report-reason-txt small{font-size:12px;font-weight:600;color:var(--muted);line-height:1.4} /* note */ .report-note-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px} .report-note-label{font-family:var(--fontH);font-weight:600;font-size:13px;color:var(--text)} .report-note-label small{font-weight:600;color:var(--faint)} .report-note{width:100%;font-family:var(--fontB);font-weight:600;font-size:14px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px 13px;outline:none;resize:vertical;line-height:1.5;transition:.14s} .report-note:focus{border-color:var(--r6);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--r6) 16%,transparent)} .report-disclaimer{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.45;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:16px} .report-disclaimer svg{color:var(--r3);flex:0 0 auto;margin-top:1px} .report-disclaimer b{color:var(--text);font-weight:800} .report-actions{display:flex;justify-content:flex-end;gap:10px} .report-actions .btn{min-width:96px;justify-content:center} .report-actions .btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none} /* stato ospite + conferma */ .report-guard,.report-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:14px 8px 8px} .report-guard-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:var(--r6);background:color-mix(in srgb,var(--r6) 14%,var(--surface))} .report-done-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;color:#fff;background:var(--r4);box-shadow:0 5px 0 color-mix(in srgb,var(--r4),#000 26%)} .report-guard b,.report-done b{font-family:var(--fontH);font-weight:600;font-size:18px;color:var(--text)} .report-guard p,.report-done p{margin:0;font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.55;max-width:40ch} .report-guard p b,.report-done p b{color:var(--text);font-weight:800} .report-guard-actions{display:flex;gap:10px;margin-top:6px} .report-done-btn{margin-top:8px;min-width:140px;justify-content:center} /* trigger contestuali coerenti nelle varie pagine */ .report-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--fontH);font-weight:600;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 13px;cursor:pointer;transition:.14s} .report-link:hover{color:var(--r1);border-color:color-mix(in srgb,var(--r1) 40%,transparent)} .report-link svg{flex:0 0 auto}