/* SafeSignal — override su Bootstrap Italia 2.x
   Il grosso dello stile (tipografia Titillium, componenti, colori PA) arriva
   da bi/css/bootstrap-italia.min.css. Qui solo i componenti propri della
   piattaforma: sigillo del key code, timeline, chat, badge di stato, scadenze. */

:root{
  --ss-sigillo:#18a08c;
  --ss-late:#d9364f;
  --ss-soon:#a66300;
}

/* Hero */
.hero-ss{background:linear-gradient(135deg,#004080 0%,#0066cc 100%)}
.ss-btn-light{background:#fff;color:#0066cc;border-color:#fff}
.ss-btn-light:hover{background:#e6f0fa;color:#004080}

/* Sigillo del key code — elemento firma della piattaforma */
.sigillo{background:#fff;border:2px dashed var(--ss-sigillo);border-radius:8px;
  padding:28px;text-align:center;margin:26px 0;position:relative}
.sigillo::before{content:"";position:absolute;top:14px;left:14px;width:12px;height:12px;
  border-radius:50%;background:var(--ss-sigillo)}
.sigillo .eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ss-sigillo)}
.sigillo .code{font-family:"Roboto Mono",monospace;font-size:1.6rem;font-weight:700;
  letter-spacing:.12em;color:#17324d;user-select:all}
.code-input{font-family:"Roboto Mono",monospace;letter-spacing:.08em}

/* Timeline stati pratica (lato segnalante) */
ul.timeline{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
ul.timeline li{flex:1;min-width:110px;text-align:center;font-size:.82rem;color:#5c6f82;
  padding-top:22px;position:relative}
ul.timeline li::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:#d9dadb;z-index:1}
ul.timeline li::after{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:#d9dadb}
ul.timeline li:first-child::after{display:none}
ul.timeline li.done{color:#17324d}
ul.timeline li.done::before{background:#008758}
ul.timeline li.now{color:#0066cc;font-weight:700}
ul.timeline li.now::before{background:#0066cc;box-shadow:0 0 0 4px rgba(0,102,204,.18)}

/* Chat interlocuzione riservata */
.chat{display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:10px 14px;border-radius:8px;font-size:.95rem;white-space:pre-wrap}
.msg.gestore{background:#e6f0fa;align-self:flex-start;border-bottom-left-radius:2px}
.msg.segnalante{background:#eef8f3;align-self:flex-end;border-bottom-right-radius:2px}
.msg .meta{font-size:.72rem;color:#5c6f82;margin-top:4px}

/* Badge di stato pratica / cliente */
.badge[class*=" b-"],.badge[class^="b-"]{font-weight:600}
.badge.b-ricevuta{background:#e6f0fa;color:#004080}
.badge.b-presa_in_carico{background:#fff3e0;color:#8a5300}
.badge.b-istruttoria{background:#ede7f6;color:#4527a0}
.badge.b-riscontro{background:#e0f2f1;color:#00695c}
.badge.b-archiviata{background:#eceff1;color:#455a64}
.badge.b-active{background:#e8f5e9;color:#1b5e20}
.badge.b-suspended{background:#fdecea;color:#b71c1c}

/* Scadenze normative */
.deadline{font-size:.85rem}
.deadline.soon{color:var(--ss-soon);font-weight:700}
.deadline.late{color:var(--ss-late);font-weight:700}

/* Identità segnalante (solo lato gestore) */
.identity-chip{background:#fdf3e0;padding:2px 10px;border-radius:4px;font-weight:600}

/* Note d'istruttoria e audit */
.note-int{background:#fbf9f4;border-left:3px solid var(--ss-sigillo);
  padding:10px 14px;margin:10px 0;font-size:.92rem;border-radius:0 4px 4px 0}
.audit-line{font-family:"Roboto Mono",monospace;font-size:.76rem;color:#5c6f82;
  padding:3px 0;border-bottom:1px dotted #e0e0e0}

/* Statistiche super admin */
.stat{background:#fff;border:1px solid #d9dadb;border-radius:8px;padding:20px;height:100%}
.stat .n{font-size:2rem;font-weight:700;color:#0066cc;line-height:1.1}
.stat .l{font-size:.85rem;color:#5c6f82;margin-top:4px}

/* Ritocchi */
.form-group label.active{position:static;transform:none;font-weight:600;font-size:.9rem;margin-bottom:4px}
input.upload{display:none}
audio{max-width:100%}

/* --- Brand SafeSignal ------------------------------------------------------ */
:root{
  --ss-navy:#16305e; --ss-blue:#1f6fd0; --ss-teal:#18a08c;
}
/* header center chiaro: il logo ha tratto navy, serve fondo bianco */
.it-header-center-wrapper{background:#fff;border-bottom:3px solid var(--ss-teal)}
.it-header-center-wrapper .it-brand-title{color:var(--ss-navy);font-weight:700}
.it-header-center-wrapper .it-brand-tagline{color:#5c6f82}
.it-header-center-wrapper .it-brand-wrapper a{color:var(--ss-navy);display:flex;align-items:center;text-decoration:none}
.it-header-center-wrapper .it-socials a{color:var(--ss-navy)!important;font-weight:600}
.it-header-slim-wrapper{background:var(--ss-navy)}
.brand-mark{height:48px;width:auto;margin-right:12px}
.login-logo{max-width:260px;height:auto}
.logo-plate{background:#fff;border-radius:12px;padding:18px;box-shadow:0 8px 24px rgba(10,30,70,.25)}
.logo-plate img{width:100%;height:auto;display:block}
/* hero e accenti sui colori del logo */
.hero-ss{background:linear-gradient(135deg,var(--ss-navy) 0%,var(--ss-blue) 70%,var(--ss-teal) 130%)}
.ss-btn-light{background:#fff;color:var(--ss-navy);border-color:#fff}
.ss-btn-light:hover{background:#e6f0fa;color:var(--ss-blue)}
/* sigillo del key code in teal, coerente col brand */
.sigillo{border-color:var(--ss-teal)}
.sigillo::before{background:var(--ss-teal)}
.sigillo .eyebrow{color:var(--ss-teal)}
.note-int{border-left-color:var(--ss-teal);background:#f2faf8}
.stat .n{color:var(--ss-blue)}