/*!
 * Canale delle segnalazioni (whistleblowing) — pagine pubbliche /segnalazioni (templates/pubblico/segnalazioni/*).
 * Foglio autonomo: niente Bootstrap, niente Tabler, niente Google Fonts (servito da /segnalazioni/risorse/, come i caratteri).
 * Chiaro o scuro secondo il sistema del visitatore.
 */
@font-face { font-family: "Titillium Web"; font-weight: 400; font-display: swap; src: url("titillium-400.ttf") format("truetype"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-display: swap; src: url("titillium-600.ttf") format("truetype"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-display: swap; src: url("titillium-700.ttf") format("truetype"); }

:root {
    --s-bg: #f3f5f9;
    --s-surface: #ffffff;
    --s-surface-2: #f7f9fc;
    --s-text: #18202e;
    --s-muted: #5b6577;
    --s-border: #dbe1ea;
    --s-border-2: #c3ccd9;
    --s-navy: #0b1320;
    --s-navy-2: #16233a;
    --s-primary: #1f5fbf;
    --s-primary-hover: #194f9f;
    --s-primary-soft: rgba(31, 95, 191, .1);
    --s-oesis: #e30613;
    --s-ok: #1d7a46;
    --s-ok-soft: #e5f4ec;
    --s-warn: #8a5a00;
    --s-warn-soft: #fff4dc;
    --s-crit: #b42318;
    --s-crit-soft: #fdecea;
    --s-radius: 10px;
    --s-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --s-focus: 0 0 0 3px rgba(31, 95, 191, .3);
}
@media (prefers-color-scheme: dark) {
    :root {
        --s-bg: #0d1420;
        --s-surface: #151f2f;
        --s-surface-2: #1b2638;
        --s-text: #e7ecf3;
        --s-muted: #9aa6b8;
        --s-border: #263449;
        --s-border-2: #34455f;
        --s-primary: #5b9bff;
        --s-primary-hover: #7fb1ff;
        --s-primary-soft: rgba(91, 155, 255, .14);
        --s-ok: #5fd19a;
        --s-ok-soft: rgba(95, 209, 154, .12);
        --s-warn: #f2c25c;
        --s-warn-soft: rgba(242, 194, 92, .12);
        --s-crit: #ff8a7a;
        --s-crit-soft: rgba(255, 138, 122, .12);
        --s-shadow: 0 1px 2px rgba(0, 0, 0, .4);
        --s-focus: 0 0 0 3px rgba(91, 155, 255, .35);
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.seg {
    margin: 0; background: var(--s-bg); color: var(--s-text);
    font: 16px/1.55 "Titillium Web", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--s-primary); }
a:hover { color: var(--s-primary-hover); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }
ul, ol { margin: 0 0 .8em; padding-left: 1.25em; }
li { margin-bottom: .3em; }
:focus-visible { outline: none; box-shadow: var(--s-focus); border-radius: 4px; }
[hidden], [data-seg-nascosto] { display: none !important; }

.seg-salta { position: absolute; left: -9999px; top: 8px; background: var(--s-surface); padding: 8px 12px; z-index: 10; }
.seg-salta:focus { left: 8px; }

/* ---------------------------------------------------------------- testata e piede */
.seg-testa { background: var(--s-navy); color: #fff; border-bottom: 3px solid var(--s-oesis); }
.seg-testa__dentro { max-width: 1080px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.seg-marchio { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.seg-marchio:hover { color: #fff; }
.seg-marchio img { width: 40px; height: 40px; object-fit: contain; }
.seg-marchio span { display: flex; flex-direction: column; line-height: 1.2; }
.seg-marchio strong { font-size: 1.1rem; }
.seg-marchio small { color: rgba(255, 255, 255, .7); font-size: .8rem; }
.seg-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.seg-nav a { color: rgba(255, 255, 255, .85); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .92rem; }
.seg-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.seg-nav a[aria-current="page"] { background: #fff; color: var(--s-navy); }
.seg-prova { background: var(--s-warn-soft); color: var(--s-warn); text-align: center; padding: 8px 16px; font-size: .9rem; border-bottom: 1px solid var(--s-border); }

.seg-corpo { max-width: 1080px; margin: 0 auto; padding: 28px 16px 40px; }
.seg-piede { border-top: 1px solid var(--s-border); color: var(--s-muted); font-size: .85rem; }
.seg-piede p { max-width: 1080px; margin: 0 auto; padding: 10px 16px 0; }
.seg-piede p:last-child { padding-bottom: 20px; }
.seg-piede__privacy { display: flex; gap: 8px; align-items: flex-start; }
.seg-piede__privacy svg { flex: none; margin-top: 3px; color: var(--s-ok); }

/* ---------------------------------------------------------------- blocchi */
.seg-eroe { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius); padding: 28px; box-shadow: var(--s-shadow); margin-bottom: 20px; }
.seg-eroe h1 { font-size: 1.9rem; }
.seg-eroe__sotto { font-size: 1.08rem; color: var(--s-muted); max-width: 760px; }
.seg-eroe__az { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.seg-titolo { font-size: 1.6rem; }
.seg-intro { color: var(--s-muted); max-width: 780px; }
.seg-nota { color: var(--s-muted); font-size: .88rem; }
.seg-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.seg-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.seg-card { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius); padding: 20px; box-shadow: var(--s-shadow); min-width: 0; }
.seg-card--larga { margin-bottom: 16px; }
.seg-card > :last-child { margin-bottom: 0; }
.seg-chi { border-left: 4px solid var(--s-primary); }
.seg-passi li::marker { color: var(--s-primary); font-weight: 700; }
@media (max-width: 760px) {
    .seg-griglia, .seg-due { grid-template-columns: minmax(0, 1fr); }
    .seg-eroe { padding: 20px; }
    .seg-eroe h1 { font-size: 1.5rem; }
}

.seg-avviso { border-radius: var(--s-radius); padding: 12px 16px; margin: 0 0 16px; border: 1px solid var(--s-border); background: var(--s-surface-2); }
.seg-avviso--errore { background: var(--s-crit-soft); border-color: var(--s-crit); color: var(--s-crit); }
.seg-avviso--attenzione { background: var(--s-warn-soft); border-color: var(--s-warn); color: var(--s-text); }
.seg-avviso--ok { background: var(--s-ok-soft); border-color: var(--s-ok); color: var(--s-ok); }

/* ---------------------------------------------------------------- pulsanti (blu = azione principale, neutro = il resto) */
.seg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer;
    padding: 9px 16px; border-radius: 8px; border: 1px solid var(--s-border-2);
    background: linear-gradient(180deg, var(--s-surface), var(--s-surface-2)); color: var(--s-text); box-shadow: var(--s-shadow);
}
.seg-btn:hover { border-color: var(--s-primary); color: var(--s-text); }
.seg-btn--primario { background: linear-gradient(180deg, #2a6fd6, #1f5fbf); border-color: #1a52a6; color: #fff; }
.seg-btn--primario:hover { background: linear-gradient(180deg, #2364c4, #194f9f); color: #fff; }
.seg-btn--grande { padding: 12px 22px; font-size: 1.05rem; }
.seg-link-file { font: inherit; background: none; border: 0; padding: 0; color: var(--s-primary); text-decoration: underline; cursor: pointer; text-align: left; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- form */
.seg-form { display: flex; flex-direction: column; gap: 16px; }
.seg-form fieldset { margin: 0; min-width: 0; }
.seg-form legend { font-weight: 700; font-size: 1.08rem; padding: 0; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; float: left; width: 100%; }
.seg-form legend ~ * { clear: both; }
.seg-form legend small { font-weight: 400; color: var(--s-muted); }
.seg-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s-primary-soft); color: var(--s-primary); font-size: .9rem; }
.seg-obbl { color: var(--s-crit); }
.seg-esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.seg-campi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 8px; }
.seg-campo { display: flex; flex-direction: column; gap: 5px; grid-column: span 3; min-width: 0; }
.seg-campo--terzo { grid-column: span 2; }
.seg-campo--piena { grid-column: 1 / -1; }
.seg-campo > span { font-weight: 600; font-size: .92rem; }
@media (max-width: 640px) { .seg-campo, .seg-campo--terzo { grid-column: 1 / -1; } }
.seg-campo input, .seg-campo select, .seg-campo textarea, .seg-verbale textarea {
    font: inherit; font-size: .97rem; width: 100%; padding: 9px 11px; border-radius: 8px;
    border: 1px solid var(--s-border-2); background: var(--s-surface); color: var(--s-text);
}
.seg-campo textarea, .seg-verbale textarea { resize: vertical; min-height: 64px; }
.seg-campo input:focus, .seg-campo select:focus, .seg-campo textarea:focus, .seg-verbale textarea:focus { outline: none; border-color: var(--s-primary); box-shadow: var(--s-focus); }
.seg-contatore { color: var(--s-muted); font-size: .8rem; align-self: flex-end; }

.seg-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.seg-scelta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--s-border-2); border-radius: var(--s-radius); cursor: pointer; background: var(--s-surface); }
.seg-scelta:has(input:checked) { border-color: var(--s-primary); background: var(--s-primary-soft); box-shadow: inset 0 0 0 1px var(--s-primary); }
.seg-scelta input { margin-top: 4px; accent-color: var(--s-primary); }
.seg-scelta span { display: flex; flex-direction: column; }
.seg-scelta small { color: var(--s-muted); font-size: .85rem; }
.seg-interruttore { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.seg-interruttore input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--s-primary); }
.seg-esclusi { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.seg-invio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.seg-card--conferma { border-color: var(--s-primary); }

/* registratore del messaggio vocale */
.seg-vocale { border: 1px dashed var(--s-border-2); border-radius: var(--s-radius); padding: 14px; margin-bottom: 14px; background: var(--s-surface-2); }
.seg-registratore__riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.seg-registratore__tempo { font-variant-numeric: tabular-nums; font-weight: 600; }
.seg-registratore.is-registra .seg-registratore__tempo { color: var(--s-crit); }
.seg-registratore.is-registra .seg-registratore__tempo::before { content: "● "; }
.seg-registratore__ascolta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.seg-registratore__ascolta audio { max-width: 100%; }

/* componente unico di trascinamento (public/js/desk/trascina.js): stesso aspetto del Desk, senza Tabler */
.desk-trascina { position: relative; display: flex; flex-direction: column; gap: 6px; border: 2px dashed var(--s-border-2); border-radius: var(--s-radius); background: var(--s-surface-2); padding: 14px 16px; min-height: 64px; transition: border-color .15s, background .15s; }
.desk-trascina:hover { border-color: var(--s-primary); }
.desk-trascina.is-sopra { border-color: var(--s-primary); background: var(--s-primary-soft); box-shadow: var(--s-focus); }
.desk-trascina.is-errore { border-color: var(--s-crit); }
.desk-trascina.is-ok { border-color: var(--s-ok); }
.desk-trascina__input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; z-index: 2; margin: 0 !important; padding: 0 !important; }
.desk-trascina__corpo { display: flex; align-items: center; gap: 12px; pointer-events: none; }
.desk-trascina__ico { width: 30px; height: 30px; flex: none; background: var(--s-primary); font-size: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.6 4.4 0 0 1 0-9 5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1'/%3E%3Cpath d='M9 15l3-3 3 3M12 12v9'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.6 4.4 0 0 1 0-9 5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1'/%3E%3Cpath d='M9 15l3-3 3 3M12 12v9'/%3E%3C/svg%3E") center / contain no-repeat; }
.desk-trascina__txt { display: flex; flex-direction: column; min-width: 0; }
.desk-trascina__tit { font-weight: 600; }
.desk-trascina__det { font-size: .8rem; color: var(--s-muted); }
.desk-trascina__file { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 3; pointer-events: none; }
.desk-trascina__file:empty { display: none; }
.desk-trascina__file li { display: flex; gap: 6px; align-items: center; font-size: .88rem; margin: 0; }
.desk-trascina__file li i { display: none; }
.desk-trascina__file li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-trascina__file li small { color: var(--s-muted); margin-left: auto; }
.desk-trascina__barra { height: 4px; border-radius: 2px; overflow: hidden; }
.desk-trascina__barra span { display: block; height: 100%; width: 0; background: var(--s-primary); }
.desk-trascina__msg { font-size: .82rem; color: var(--s-muted); }
.desk-trascina__msg:empty { display: none; }
.desk-trascina.is-errore .desk-trascina__msg { color: var(--s-crit); }

/* ---------------------------------------------------------------- ricevuta e codice */
.seg-ricevuta { text-align: left; }
.seg-ricevuta__ok { color: var(--s-ok); }
.seg-codice { background: var(--s-surface); border: 2px solid var(--s-primary); border-radius: var(--s-radius); padding: 18px 20px; margin: 18px 0; text-align: center; }
.seg-codice__etichetta { display: block; color: var(--s-muted); font-weight: 600; margin-bottom: 6px; }
.seg-codice__valore { display: block; font: 700 clamp(1.15rem, 4.6vw, 1.9rem)/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; }
.seg-codice__az { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.seg-input-codice { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important; letter-spacing: .05em; text-transform: uppercase; font-size: 1.1rem !important; }
.seg-accesso { max-width: 640px; }
.seg-accesso__form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-bottom: 14px; }

/* ---------------------------------------------------------------- stato e dialogo */
.seg-stato__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seg-percorso { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 14px; counter-reset: passo; }
.seg-percorso li { counter-increment: passo; padding: 8px 10px; border-radius: 8px; background: var(--s-surface); border: 1px solid var(--s-border); color: var(--s-muted); font-weight: 600; font-size: .9rem; margin: 0; }
.seg-percorso li::before { content: counter(passo) ". "; }
.seg-percorso li.is-fatto { color: var(--s-ok); border-color: var(--s-ok); background: var(--s-ok-soft); }
.seg-percorso li.is-ora { color: #fff; background: var(--s-primary); border-color: var(--s-primary); }
@media (max-width: 560px) { .seg-percorso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seg-date { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin: 0 0 16px; }
.seg-date div { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: 8px; padding: 8px 12px; }
.seg-date dt { color: var(--s-muted); font-size: .82rem; }
.seg-date dd { margin: 0; font-weight: 600; }
.seg-mia { margin-bottom: 16px; }
.seg-mia summary { cursor: pointer; font-weight: 600; }
.seg-mia[open] summary { margin-bottom: 10px; }
.seg-testo { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.seg-dialogo { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.seg-dialogo h2 { margin-bottom: 4px; }
.seg-msg { max-width: 82%; border-radius: 12px; padding: 12px 14px; border: 1px solid var(--s-border); background: var(--s-surface); box-shadow: var(--s-shadow); }
.seg-msg--mio { align-self: flex-end; background: var(--s-primary-soft); border-color: transparent; }
.seg-msg--loro { align-self: flex-start; }
.seg-msg.is-nuovo { border-color: var(--s-primary); }
.seg-msg--riscontro, .seg-msg--verbale { border-left: 4px solid var(--s-primary); }
.seg-msg header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: .9rem; }
.seg-msg time { color: var(--s-muted); margin-left: auto; font-size: .82rem; }
@media (max-width: 560px) { .seg-msg { max-width: 100%; } }
.seg-etichetta { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: var(--s-surface-2); border: 1px solid var(--s-border); color: var(--s-muted); }
.seg-etichetta--nuovo { background: var(--s-primary); border-color: var(--s-primary); color: #fff; }
.seg-allegati { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.seg-allegati form { display: flex; gap: 8px; align-items: baseline; }
.seg-allegati small { color: var(--s-muted); }
.seg-verbale { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.seg-verbale__az { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-rispondi { display: flex; flex-direction: column; gap: 12px; }
.seg-rispondi .seg-invio { margin-top: 0; }
.seg-informativa h2 { margin-top: 1.2em; }

/* ---------------------------------------------------------------- stampa (ricevuta col codice) */
@media print {
    body.seg { background: #fff; color: #000; }
    .seg-testa, .seg-nav, .seg-piede, .seg-codice__az, .seg-prova, .seg-btn { display: none !important; }
    .seg-card, .seg-codice { box-shadow: none; border-color: #999; }
}