/* ==========================================================================
Accessi Civici Comunali — Area Pubblica
v1.3.0 — Bootstrap Italia + override istituzionali AGID
========================================================================== */
/* ── Variabili ─────────────────────────────────────────────────────────── */
:root {
--acc-navy: #17324d;
--acc-blue: #0066cc;
--acc-blue-lt: #e8f1fb;
--acc-green: #008a51;
--acc-green-lt: #e6f4ee;
--acc-orange: #e87024;
--acc-red: #cc2900;
--acc-red-lt: #fce8e5;
--acc-yellow-lt: #fef8e6;
--acc-grey-lt: #f2f5f7;
--acc-border: #dce4ea;
--acc-shadow: 0 2px 8px rgba(23,50,77,.10);
--acc-radius: 6px;
}
/* ── Contenitore generale ──────────────────────────────────────────────── */
.acc-public-form,
.acc-tracking-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Titillium Web', 'Segoe UI', sans-serif; }
/* ── Bootstrap Italia SVG icons (dimensioni e colori) ─────────────────── */
.acc-alert-box.success .icon,
.acc-alert-box.success svg { fill: var(--acc-green); color: var(--acc-green); }
.acc-alert-box.error .icon,
.acc-alert-box.error svg { fill: var(--acc-red); color: var(--acc-red); }
.acc-alert-box.warning .icon,
.acc-alert-box.warning svg { fill: #7a4d00; color: #7a4d00; }
.acc-callout .icon,
.acc-callout svg { fill: var(--acc-blue); color: var(--acc-blue); }
.acc-btn-submit .icon,
.acc-btn-submit svg { fill: #fff; color: #fff; }
.acc-attach-download .icon,
.acc-attach-download svg { fill: var(--acc-blue); color: var(--acc-blue); }
.acc-pub-timeline h5 .icon,
.acc-pub-timeline h5 svg { fill: var(--acc-navy); color: var(--acc-navy); }
.acc-tracking-attachments h5 .icon,
.acc-tracking-attachments h5 svg { fill: var(--acc-navy); color: var(--acc-navy); }
.acc-tracking-form-card h4 .icon,
.acc-tracking-form-card h4 svg { fill: var(--acc-navy); color: var(--acc-navy); }
.acc-tracking-deadline-overdue .icon,
.acc-tracking-deadline-overdue svg { fill: var(--acc-red); color: var(--acc-red); }
.acc-tracking-deadline-soon .icon,
.acc-tracking-deadline-soon svg { fill: var(--acc-orange); color: var(--acc-orange); }
/* ── Callout informativo ───────────────────────────────────────────────── */
.acc-public-form .acc-callout {
display: flex;
gap: 14px;
padding: 16px 20px;
border-radius: var(--acc-radius);
border-left: 4px solid var(--acc-blue);
background: var(--acc-blue-lt);
margin-bottom: 28px;
}
.acc-callout-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.acc-callout-body {}
.acc-callout-body strong { display: block; font-size: 15px; color: var(--acc-navy); margin-bottom: 4px; }
.acc-callout-body p { margin: 0; font-size: 14px; line-height: 1.5; color: #555; }
/* ── Sezioni del form ──────────────────────────────────────────────────── */
.acc-form-section {
background: #fff;
border: 1px solid var(--acc-border);
border-radius: var(--acc-radius);
margin-bottom: 20px;
overflow: hidden;
box-shadow: var(--acc-shadow);
}
.acc-form-section-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: var(--acc-grey-lt);
border-bottom: 1px solid var(--acc-border);
}
.acc-form-section-num {
width: 28px;
height: 28px;
background: var(--acc-blue);
color: #fff;
border-radius: 50%;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.acc-form-section-header h3 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--acc-navy);
}
.acc-form-section-body { padding: 20px; }
/* ── Labels e input ────────────────────────────────────────────────────── */
.acc-public-form label.acc-label,
.acc-tracking-wrapper label.acc-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--acc-navy);
margin-bottom: 6px;
}
.acc-public-form label.acc-label .acc-req {
color: var(--acc-red);
margin-left: 2px;
}
.acc-public-form label.acc-label .acc-opt {
font-weight: 400;
font-size: 12px;
color: #888;
margin-left: 6px;
}
/* Override Bootstrap Italia — input */
.acc-public-form .form-control,
.acc-public-form .form-select,
.acc-tracking-wrapper .form-control,
.acc-tracking-wrapper .form-select {
border: 1.5px solid var(--acc-border) !important;
border-radius: var(--acc-radius) !important;
padding: 10px 14px !important;
font-size: 15px !important;
color: var(--acc-navy) !important;
background-color: #fff !important;
transition: border-color .15s, box-shadow .15s !important;
width: 100%;
}
.acc-public-form .form-control:focus,
.acc-public-form .form-select:focus,
.acc-tracking-wrapper .form-control:focus {
border-color: var(--acc-blue) !important;
box-shadow: 0 0 0 3px rgba(0,102,204,.15) !important;
outline: none !important;
}
.acc-public-form .form-control.is-invalid,
.acc-public-form .form-select.is-invalid {
border-color: var(--acc-red) !important;
}
.acc-public-form textarea.form-control { resize: vertical; min-height: 120px; }
.acc-public-form .form-text {
font-size: 12px !important;
color: #888 !important;
margin-top: 5px !important;
}
/* File input */
.acc-public-form input[type="file"].form-control {
padding: 8px 12px !important;
cursor: pointer;
}
/* ── Grid row del form ─────────────────────────────────────────────────── */
.acc-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.acc-form-row.single { grid-template-columns: 1fr; }
.acc-form-row.triple { grid-template-columns: 1fr 1fr 1fr; }
.acc-form-row[hidden] { display: none !important; }
.acc-form-field { margin-bottom: 0; }
@media (max-width: 640px) {
.acc-form-row, .acc-form-row.triple { grid-template-columns: 1fr; }
}
/* ── Tipo richiedente: gruppo radio ────────────────────────────────────── */
.acc-applicant-type-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
.acc-applicant-type-option {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1.5px solid #e0e6ec;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
font-size: 14px;
color: #2c3e50;
background: #fff;
transition: border-color .15s, background .15s, box-shadow .15s;
flex: 1 1 200px;
}
.acc-applicant-type-option:hover {
border-color: #4a90d9;
}
.acc-applicant-type-option:has(input:checked) {
border-color: #0066cc;
background: #eef5ff;
box-shadow: 0 0 0 3px rgba(0,102,204,.08);
}
.acc-applicant-type-option input[type="radio"] {
accent-color: #0066cc;
margin: 0;
}
/* ── Sotto-blocco "Dati ente" ──────────────────────────────────────────── */
.acc-entity-block {
background: #f6f9fc;
border: 1px solid #e0e8f0;
border-left: 4px solid #0066cc;
border-radius: 8px;
padding: 18px 18px 6px;
margin: 4px 0 18px;
}
.acc-entity-block[hidden] { display: none !important; }
.acc-entity-block .acc-form-row { margin-bottom: 14px; }
.acc-form-subsection-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: #5a6675;
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px dashed #d8e0e8;
}
/* ── Bottone submit ────────────────────────────────────────────────────── */
.acc-submit-area {
display: flex;
align-items: center;
gap: 16px;
padding-top: 8px;
flex-wrap: wrap;
}
.acc-btn-submit {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 13px 32px !important;
background: var(--acc-blue) !important;
color: #fff !important;
border: none !important;
border-radius: var(--acc-radius) !important;
font-size: 16px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background .15s, transform .1s, box-shadow .15s !important;
box-shadow: 0 2px 8px rgba(0,102,204,.25) !important;
text-decoration: none !important;
}
.acc-btn-submit:hover {
background: #0052a3 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 14px rgba(0,102,204,.35) !important;
}
.acc-btn-submit:active { transform: translateY(0) !important; }
.acc-submit-note { font-size: 12px; color: #888; }
/* ── Privacy checkbox ──────────────────────────────────────────────────── */
.acc-privacy-block {
background: var(--acc-grey-lt);
border: 1px solid var(--acc-border);
border-radius: var(--acc-radius);
padding: 14px 16px;
margin-bottom: 20px;
}
.acc-privacy-block label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.5;
cursor: pointer;
color: #444;
}
.acc-privacy-block input[type="checkbox"] {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--acc-blue);
cursor: pointer;
}
.acc-privacy-block a { color: var(--acc-blue); }
/* ── Alert messages ────────────────────────────────────────────────────── */
.acc-alert-box {
display: flex;
gap: 14px;
padding: 18px 20px;
border-radius: var(--acc-radius);
margin-bottom: 24px;
box-shadow: var(--acc-shadow);
}
.acc-alert-box .acc-alert-icon-wrap {
font-size: 28px;
flex-shrink: 0;
}
.acc-alert-box.success {
background: var(--acc-green-lt);
border: 1px solid #b7deca;
border-left: 4px solid var(--acc-green);
}
.acc-alert-box.error {
background: var(--acc-red-lt);
border: 1px solid #f5b8ae;
border-left: 4px solid var(--acc-red);
}
.acc-alert-box.warning {
background: var(--acc-yellow-lt);
border: 1px solid #f5dcaa;
border-left: 4px solid #f7a600;
}
.acc-alert-box.info {
background: #eaf3fb;
border: 1px solid #b8d6ec;
border-left: 4px solid #0066cc;
}
.acc-alert-box.danger {
background: var(--acc-red-lt);
border: 1px solid #f5b8ae;
border-left: 4px solid var(--acc-red);
}
.acc-alert-box h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.acc-alert-box.success h4 { color: #0d4a2e; }
.acc-alert-box.error h4 { color: #7f1c0e; }
.acc-alert-box.info h4 { color: #064775; }
.acc-alert-box.danger h4 { color: #7f1c0e; }
.acc-alert-box p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.acc-alert-box p:last-child { margin-bottom: 0; }
.acc-codice-pratica {
display: inline-block;
background: #fff;
border: 2px solid var(--acc-green);
border-radius: var(--acc-radius);
padding: 8px 18px;
font-size: 20px;
font-weight: 800;
font-family: 'SF Mono', 'Fira Code', monospace;
color: #0d4a2e;
letter-spacing: .04em;
margin: 8px 0;
}
.acc-error-list { margin: 8px 0 0; padding-left: 20px; }
.acc-error-list li { font-size: 14px; margin-bottom: 4px; color: #7f1c0e; }
/* ── Tracking: card risultato ──────────────────────────────────────────── */
.acc-tracking-result {
background: #fff;
border: 1px solid var(--acc-border);
border-radius: var(--acc-radius);
box-shadow: var(--acc-shadow);
margin-bottom: 24px;
overflow: hidden;
}
.acc-tracking-result-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: linear-gradient(135deg, var(--acc-navy) 0%, #1e3f63 100%);
flex-wrap: wrap;
gap: 10px;
}
.acc-tracking-code {
font-size: 20px;
font-weight: 800;
color: #fff;
font-family: 'SF Mono', monospace;
letter-spacing: .03em;
}
.acc-tracking-status-pill {
display: inline-block;
padding: 6px 18px;
border-radius: 30px;
font-size: 13px;
font-weight: 700;
background: rgba(255,255,255,.2);
color: #fff;
border: 2px solid rgba(255,255,255,.4);
}
.acc-tracking-body { padding: 22px; }
.acc-tracking-meta {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.acc-tracking-meta-item {}
.acc-tracking-meta-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #888; margin-bottom: 3px; }
.acc-tracking-meta-value { font-size: 15px; color: var(--acc-navy); font-weight: 500; }
.acc-tracking-deadline-overdue { color: var(--acc-red); font-weight: 700; }
.acc-tracking-deadline-soon { color: var(--acc-orange); font-weight: 600; }
/* ── Tracking: allegati ────────────────────────────────────────────────── */
.acc-tracking-attachments { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--acc-border); }
.acc-tracking-attachments h5 { font-size: 14px; font-weight: 700; color: var(--acc-navy); margin: 0 0 12px; }
.acc-attach-list { list-style: none; padding: 0; margin: 0; }
.acc-attach-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid var(--acc-border);
border-radius: var(--acc-radius);
margin-bottom: 8px;
background: #fafbfc;
text-decoration: none;
color: var(--acc-navy);
transition: background .12s, border-color .12s;
}
.acc-attach-item:hover {
background: var(--acc-blue-lt);
border-color: var(--acc-blue);
color: var(--acc-blue);
}
.acc-attach-icon { font-size: 20px; flex-shrink: 0; }
.acc-attach-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.acc-attach-name { font-size: 14px; font-weight: 500; word-break: break-word; }
.acc-attach-desc {
font-size: 12.5px;
color: #5a6675;
line-height: 1.5;
font-weight: 400;
}
.acc-attach-download { font-size: 12px; color: var(--acc-blue); flex-shrink: 0; }
/* ── Tracking: timeline pubblica ───────────────────────────────────────── */
.acc-pub-timeline { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--acc-border); }
.acc-pub-timeline h5 { font-size: 14px; font-weight: 700; color: var(--acc-navy); margin: 0 0 16px; }
.acc-pub-timeline-list { list-style: none; padding: 0; margin: 0; }
.acc-pub-timeline-item {
display: flex;
gap: 12px;
padding-bottom: 16px;
position: relative;
}
.acc-pub-timeline-item:not(:last-child)::before {
content: '';
position: absolute;
left: 11px; top: 24px; bottom: 0;
width: 2px; background: var(--acc-border);
}
.acc-pub-dot {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--acc-blue);
border: 3px solid #fff;
box-shadow: 0 0 0 2px var(--acc-blue);
flex-shrink: 0;
z-index: 1;
}
.acc-pub-dot.dot-success { background: var(--acc-green); box-shadow: 0 0 0 2px var(--acc-green); }
.acc-pub-dot.dot-danger { background: var(--acc-red); box-shadow: 0 0 0 2px var(--acc-red); }
.acc-pub-dot.dot-grey { background: #9e9e9e; box-shadow: 0 0 0 2px #9e9e9e; }
.acc-pub-tl-content { flex: 1; padding-top: 2px; }
.acc-pub-tl-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
background: var(--acc-blue-lt);
color: var(--acc-blue);
margin-bottom: 2px;
}
.acc-pub-tl-date { font-size: 11px; color: #888; margin-left: 6px; }
.acc-pub-tl-note { font-size: 13px; color: #555; margin-top: 4px; line-height: 1.5; }
.acc-pub-tl-note-sys {
display: inline-block;
color: #4a5568;
font-style: italic;
}
.acc-pub-tl-note-tag {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
background: #e0e7ff;
color: #3730a3;
padding: 1px 7px;
border-radius: 9px;
margin-right: 5px;
font-style: normal;
vertical-align: 1px;
}
/* ── Form tracking ─────────────────────────────────────────────────────── */
.acc-tracking-form-card {
background: #fff;
border: 1px solid var(--acc-border);
border-radius: var(--acc-radius);
padding: 24px;
box-shadow: var(--acc-shadow);
}
.acc-tracking-form-card h4 {
font-size: 16px;
font-weight: 700;
color: var(--acc-navy);
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--acc-border);
}
/* ── Comunicazioni con l'amministrazione ─────────────────────────────── */
/* IMPORTANTE: la card-container è gestita SOLO da .acc-pub-section.
Le vecchie regole .acc-pub-comms/.acc-pub-reply che ridefinivano
background/border/padding/shadow sono state rimosse perché
generavano conflitti CSS che, in alcuni temi (BS Italia + custom),
facevano collassare i figli con la lista comunicazioni che
appariva vuota nonostante il counter mostrasse N>0. */
.acc-pub-comms-desc {
font-size: 12.5px;
color: #5a6675;
margin: 0 0 14px;
line-height: 1.45;
}
.acc-pub-comms-list {
list-style: none;
margin: 0;
padding: 0;
/* NB: usiamo block + spaziatura tradizionale (margin-bottom sui figli)
invece di flex+gap. Più resistente a override tema/Bootstrap Italia
che possono accidentalmente impostare flex:0 sui list-item. */
display: block;
}
.acc-pub-comm {
/* Difesa contro reset di temi che fanno display:none o
list-item su . Forziamo block esplicito. */
display: block;
list-style: none;
background: #fff;
border: 1px solid var(--acc-border);
border-radius: var(--acc-radius);
padding: 12px 14px;
margin: 0 0 10px;
box-sizing: border-box;
min-height: 52px;
}
.acc-pub-comm:last-child { margin-bottom: 0; }
.acc-pub-comm-from-me { border-left: 3px solid #6633cc; background: #faf7ff; }
.acc-pub-comm-from-office { border-left: 3px solid var(--acc-blue); }
.acc-pub-comm-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.acc-pub-comm-badge {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
padding: 2px 8px;
border-radius: 999px;
white-space: nowrap;
}
.acc-pub-comm-date {
font-size: 11.5px;
color: #6e7785;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.acc-pub-comm-subject {
font-weight: 600;
color: var(--acc-navy);
font-size: 13.5px;
margin-bottom: 6px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.acc-pub-comm-body {
font-size: 13px;
color: #2b3a4f;
line-height: 1.55;
word-wrap: break-word;
overflow-wrap: break-word;
}
.acc-pub-comm-body p { margin: 0 0 6px; }
.acc-pub-comm-body p:last-child { margin-bottom: 0; }
.acc-pub-comm-body ul,
.acc-pub-comm-body ol { margin: 6px 0 6px 22px; padding: 0; }
.acc-pub-comm-empty { color: #9aa3af; font-style: italic; font-size: 12.5px; }
/* ── Allegati inline a una comunicazione ─────────────────────────────── */
/* Rendono visivamente connessi messaggio e file: padding, divisore
superiore, icona graffetta. Sono distinti dalla sezione "Documenti
disponibili" perché legati a una specifica comunicazione. */
.acc-pub-comm-attachments {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--acc-border);
}
.acc-pub-comm-attachments-label {
font-size: 12px;
font-weight: 600;
color: #5a6675;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.acc-pub-comm-attachments-label .icon,
.acc-pub-comm-attachments-label svg { fill: #5a6675; color: #5a6675; }
.acc-pub-comm-att-count {
display: inline-block;
padding: 1px 7px;
background: var(--acc-navy);
color: #fff;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
line-height: 1.5;
}
.acc-pub-comm-attach-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.acc-pub-comm-attach {
display: block;
list-style: none;
margin: 0;
}
.acc-pub-comm-attach-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #fff;
border: 1px solid var(--acc-border);
border-radius: 6px;
color: var(--acc-blue);
text-decoration: none;
font-size: 12.5px;
transition: background .15s, border-color .15s;
max-width: 100%;
}
.acc-pub-comm-attach-link:hover,
.acc-pub-comm-attach-link:focus {
background: var(--acc-blue-lt);
border-color: var(--acc-blue);
text-decoration: none;
}
.acc-pub-comm-attach-name {
font-weight: 600;
color: var(--acc-navy);
word-break: break-word;
overflow-wrap: anywhere;
}
.acc-pub-comm-attach-dl {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--acc-blue);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .03em;
font-weight: 700;
margin-left: auto;
flex-shrink: 0;
}
.acc-pub-comm-attach-link .icon,
.acc-pub-comm-attach-link svg { fill: var(--acc-blue); color: var(--acc-blue); flex-shrink: 0; }
.acc-pub-comm-attach-expired {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #f4f5f7;
border: 1px dashed #c8ccd3;
border-radius: 6px;
color: #6e7785;
font-size: 12.5px;
cursor: not-allowed;
}
.acc-pub-comm-attach-expired .acc-pub-comm-attach-name { color: #6e7785; font-weight: 500; }
.acc-pub-comm-attach-expired .acc-pub-comm-attach-state { margin-left: auto; font-size: 11px; color: #6e7785; }
.acc-pub-comm-attach-expired .icon,
.acc-pub-comm-attach-expired svg { fill: #9aa3af; color: #9aa3af; }
/* ── Form risposta cittadino ─────────────────────────────────────────── */
/* Anche qui: card gestita da .acc-pub-section. Manteniamo solo i
modificatori (emphasis/info/closed). */
.acc-pub-reply-desc {
font-size: 13px;
color: #4a5663;
margin: 0 0 14px;
line-height: 1.5;
}
.acc-pub-reply-wrap textarea { resize: vertical; min-height: 110px; }
/* Honeypot: invisibile a utenti e screen reader, i bot lo vedono. */
.acc-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.acc-pub-counter { color: #6e7785; font-size: 11.5px; }
.acc-pub-reply-note { margin: 10px 0 0; color: #6e7785; line-height: 1.4; }
.acc-pub-reply-note small { font-size: 11.5px; }
.acc-pub-reply-closed-msg {
background: #f2f5f7;
color: #6e7785;
text-align: center;
padding: 14px;
margin: 0;
border-radius: var(--acc-radius);
}
@keyframes acc-pub-pulse-attention {
0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,.3); }
50% { box-shadow: 0 0 0 7px rgba(245,158,11,.1); }
}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.acc-tracking-result-header { flex-direction: column; align-items: flex-start; }
.acc-tracking-meta { grid-template-columns: 1fr 1fr; }
.acc-submit-area { flex-direction: column; align-items: stretch; }
.acc-btn-submit { justify-content: center; padding: 14px 24px !important; font-size: 15px !important; }
.acc-form-section-body { padding: 16px; }
.acc-form-section-header { padding: 12px 16px; }
.acc-callout { padding: 12px 16px; flex-wrap: wrap; }
.acc-tracking-body { padding: 16px; }
.acc-tracking-form-card { padding: 18px; }
.acc-attach-item { flex-wrap: wrap; }
.acc-attach-info { flex: 1 1 100%; }
.acc-attach-name { flex: 1 1 100%; }
.acc-pub-comm-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 480px) {
.acc-tracking-meta { grid-template-columns: 1fr; }
.acc-codice-pratica { font-size: 17px; padding: 6px 14px; }
.acc-tracking-code { font-size: 17px; }
.acc-tracking-result-header { padding: 14px 16px; }
}
/* ==========================================================================
Tracking pubblico — Layout lineare con sezioni a card (v1.4)
Header "hero" + anchor nav + sezioni collassabili.
Sostituisce il vecchio .acc-tracking-result/.acc-tracking-result-header.
========================================================================== */
/* ── HERO (intestazione pratica) ─────────────────────────────────────────── */
.acc-pub-hero {
background: linear-gradient(135deg, var(--acc-navy) 0%, #1f4068 100%);
color: #fff;
border-radius: var(--acc-radius);
padding: 22px 26px 24px;
box-shadow: var(--acc-shadow);
margin-bottom: 16px;
scroll-margin-top: 16px;
}
.acc-pub-hero-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
}
.acc-pub-hero-top-left {
min-width: 0; /* per ellipsis su mobile */
flex: 1;
}
.acc-pub-hero-top-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.acc-pub-hero-logout {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(255,255,255,.12);
color: rgba(255,255,255,.92);
border: 1px solid rgba(255,255,255,.25);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
white-space: nowrap;
}
.acc-pub-hero-logout:hover,
.acc-pub-hero-logout:focus {
background: rgba(255,255,255,.22);
color: #fff;
border-color: rgba(255,255,255,.5);
text-decoration: none;
}
.acc-pub-hero-logout .icon,
.acc-pub-hero-logout svg { fill: currentColor; color: inherit; }
.acc-pub-hero-code-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.7);
margin-bottom: 2px;
}
.acc-pub-hero-code {
font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
font-size: 22px;
font-weight: 800;
letter-spacing: .02em;
color: #fff;
/* word-break: break-all spezzava il codice in modo casuale ("AC-2024010
1-ABC..."). Usiamo overflow-wrap: anywhere come fallback solo quando
il codice è davvero più largo del container (mobile estremo). */
word-break: normal;
overflow-wrap: anywhere;
}
.acc-pub-hero-status {
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255,255,255,.15);
color: #fff;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
border: 1px solid rgba(255,255,255,.3);
white-space: nowrap;
flex-shrink: 0;
}
/* Variazioni semaforiche per status (sfondo accentato) */
.acc-pub-hero-accolta .acc-pub-hero-status,
.acc-pub-hero-parziale .acc-pub-hero-status { background: var(--acc-green); border-color: rgba(255,255,255,.4); }
.acc-pub-hero-diniego .acc-pub-hero-status { background: var(--acc-red); border-color: rgba(255,255,255,.4); }
.acc-pub-hero-differita .acc-pub-hero-status,
.acc-pub-hero-controinteressati .acc-pub-hero-status,
.acc-pub-hero-integrazione .acc-pub-hero-status { background: var(--acc-orange); border-color: rgba(255,255,255,.4); }
.acc-pub-hero-chiusa .acc-pub-hero-status { background: #6c7a89; border-color: rgba(255,255,255,.4); }
.acc-pub-hero-subject {
font-size: 17px;
font-weight: 600;
color: #fff;
margin: 8px 0 0; /* subito sotto il codice, niente gap pesante */
line-height: 1.4;
word-wrap: break-word;
/* Lieve transparency per dare gerarchia: il codice è il "tag",
l'oggetto è il "titolo umano" della pratica. */
color: rgba(255,255,255,.94);
}
.acc-pub-hero-subject::before {
content: 'Oggetto della richiesta';
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.6);
margin-bottom: 4px;
}
/* Helper accessibilità: nascondi visivamente ma manda a screen reader. */
.acc-sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Meta pratica — griglia auto-fit, mobile-first */
.acc-pub-hero-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin: 0;
padding: 14px 16px;
background: rgba(255,255,255,.08);
border-radius: var(--acc-radius);
}
.acc-pub-hero-meta-item dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: rgba(255,255,255,.7);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 5px;
}
.acc-pub-hero-meta-item dt .icon,
.acc-pub-hero-meta-item dt svg { fill: rgba(255,255,255,.7); color: rgba(255,255,255,.7); }
.acc-pub-hero-meta-item dd {
font-size: 14px;
font-weight: 600;
color: #fff;
margin: 0;
line-height: 1.4;
word-wrap: break-word;
}
.acc-pub-hero-meta-item dd strong { color: #fff; font-weight: 700; }
.acc-pub-hero-meta .acc-tracking-deadline-overdue,
.acc-pub-hero-meta .acc-tracking-deadline-soon {
color: #ffd56b;
font-weight: 700;
}
.acc-pub-hero-meta .acc-tracking-deadline-overdue .icon,
.acc-pub-hero-meta .acc-tracking-deadline-overdue svg,
.acc-pub-hero-meta .acc-tracking-deadline-soon .icon,
.acc-pub-hero-meta .acc-tracking-deadline-soon svg { fill: #ffd56b; color: #ffd56b; }
/* CTA "azione richiesta" sopra il fold */
.acc-pub-hero-cta {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 14px 18px;
background: #ffd56b;
color: #4d3700;
text-decoration: none;
border-radius: var(--acc-radius);
font-size: 14px;
line-height: 1.5;
border-left: 4px solid #f7a600;
transition: transform .15s, box-shadow .15s;
}
.acc-pub-hero-cta:hover,
.acc-pub-hero-cta:focus {
color: #4d3700;
background: #ffcb47;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(247,166,0,.3);
}
.acc-pub-hero-cta strong { font-weight: 800; }
.acc-pub-hero-cta .icon,
.acc-pub-hero-cta svg { fill: #c97c00; color: #c97c00; flex-shrink: 0; }
/* ── ANCHOR NAV (mini-menu di navigazione tra sezioni) ───────────────────── */
.acc-pub-anchors {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
padding: 10px 14px;
background: var(--acc-blue-lt);
border: 1px solid #c5dbf2;
border-radius: var(--acc-radius);
margin-bottom: 18px;
font-size: 13px;
}
.acc-pub-anchors-label {
color: var(--acc-navy);
font-weight: 700;
margin-right: 4px;
flex-shrink: 0;
}
.acc-pub-anchors a {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
background: #fff;
color: var(--acc-blue);
text-decoration: none;
border: 1px solid transparent;
border-radius: 999px;
transition: background .15s, color .15s, border-color .15s, transform .1s;
white-space: nowrap;
}
.acc-pub-anchors a:hover,
.acc-pub-anchors a:focus {
background: var(--acc-blue);
color: #fff;
border-color: var(--acc-blue);
}
.acc-pub-anchors a:hover .icon,
.acc-pub-anchors a:hover svg,
.acc-pub-anchors a:focus .icon,
.acc-pub-anchors a:focus svg { fill: #fff; color: #fff; }
.acc-pub-anchors a .icon,
.acc-pub-anchors a svg { fill: var(--acc-blue); color: var(--acc-blue); }
.acc-pub-anchors-count {
display: inline-block;
margin-left: 2px;
padding: 1px 7px;
background: var(--acc-navy);
color: #fff;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
}
.acc-pub-anchors a:hover .acc-pub-anchors-count,
.acc-pub-anchors a:focus .acc-pub-anchors-count {
background: #fff;
color: var(--acc-blue);
}
/* CTA azione richiesta nell'anchor menu (giallo) */
.acc-pub-anchors a.acc-pub-anchors-cta {
background: #ffd56b;
color: #4d3700;
font-weight: 700;
border-color: #f7a600;
}
.acc-pub-anchors a.acc-pub-anchors-cta .icon,
.acc-pub-anchors a.acc-pub-anchors-cta svg { fill: #c97c00; color: #c97c00; }
.acc-pub-anchors a.acc-pub-anchors-cta:hover,
.acc-pub-anchors a.acc-pub-anchors-cta:focus {
background: #ffcb47;
color: #4d3700;
border-color: #c97c00;
}
/* ── SEZIONI a card uniformi ─────────────────────────────────────────────── */
.acc-pub-section {
background: #fff;
border: 1px solid var(--acc-border);
border-radius: var(--acc-radius);
padding: 22px 26px;
margin-bottom: 18px;
box-shadow: var(--acc-shadow);
scroll-margin-top: 16px;
}
.acc-pub-section-head {
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--acc-border);
}
.acc-pub-section-title {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font-size: 17px;
font-weight: 700;
color: var(--acc-navy);
line-height: 1.3;
}
.acc-pub-section-title .icon,
.acc-pub-section-title svg { fill: var(--acc-navy); color: var(--acc-navy); flex-shrink: 0; }
.acc-pub-section-count {
display: inline-block;
padding: 2px 9px;
background: var(--acc-navy);
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1.5;
margin-left: 4px;
}
/* Sezione "rispondi" in modalità "azione richiesta" */
.acc-pub-section.acc-pub-reply-emphasis {
border-left: 4px solid #f7a600;
background: linear-gradient(135deg, #fffbf0 0%, #ffffff 100%);
}
.acc-pub-section.acc-pub-reply-emphasis .acc-pub-section-title {
color: #4d3700;
}
/* Puntino animato "azione richiesta" prima del titolo (era sul
vecchio h5::before, ora applicato al nuovo h2.acc-pub-section-title) */
.acc-pub-section.acc-pub-reply-emphasis .acc-pub-section-title::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #f59e0b;
box-shadow: 0 0 0 4px rgba(245,158,11,.3);
margin-right: 4px;
flex-shrink: 0;
animation: acc-pub-pulse-attention 2s ease-in-out infinite;
}
.acc-pub-section.acc-pub-reply-info {
border-left: 4px solid var(--acc-blue);
background: linear-gradient(135deg, #f5f9fd 0%, #ffffff 100%);
}
.acc-pub-section.acc-pub-reply-closed { opacity: .8; }
/* ── Comprimibili () ────────────────────────────────────────────── */
.acc-pub-collapse {
margin-bottom: 16px;
border-bottom: 1px dashed var(--acc-border);
padding-bottom: 12px;
}
.acc-pub-collapse summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--acc-blue);
font-size: 13px;
font-weight: 600;
padding: 6px 10px;
border-radius: 4px;
user-select: none;
transition: background .15s;
}
.acc-pub-collapse summary::-webkit-details-marker { display: none; }
.acc-pub-collapse summary:hover { background: var(--acc-blue-lt); }
.acc-pub-collapse[open] summary .icon,
.acc-pub-collapse[open] summary svg { transform: rotate(90deg); }
.acc-pub-collapse summary .icon,
.acc-pub-collapse summary svg {
fill: var(--acc-blue);
color: var(--acc-blue);
transition: transform .2s;
}
.acc-pub-collapse > ul,
.acc-pub-collapse > details > ul { margin-top: 10px; }
/* ── Etichetta scadenza allegati ─────────────────────────────────────────── */
.acc-pub-attach-expiry-note {
font-size: 12.5px;
color: #5a6675;
margin-top: 12px;
padding: 10px 12px;
background: var(--acc-blue-lt);
border-radius: 4px;
border-left: 3px solid var(--acc-blue);
}
.acc-pub-attach-expiry-note .icon,
.acc-pub-attach-expiry-note svg { fill: var(--acc-blue); color: var(--acc-blue); }
/* ── Responsive: mobile-first refinements ────────────────────────────────── */
@media (max-width: 600px) {
.acc-pub-hero { padding: 18px 18px 20px; }
.acc-pub-hero-top { flex-direction: column; align-items: stretch; gap: 10px; }
.acc-pub-hero-status { align-self: flex-start; }
.acc-pub-hero-code { font-size: 18px; }
.acc-pub-hero-subject { font-size: 16px; margin-bottom: 14px; }
.acc-pub-hero-meta { grid-template-columns: 1fr; padding: 12px 14px; gap: 10px; }
.acc-pub-hero-cta { font-size: 13px; padding: 12px 14px; }
/* Anchor nav scrollabile orizzontalmente: invece di wrappare in 3
righe (illeggibile), trasformiamo in una "tab bar" scrollabile.
Più simile al pattern app mobile, niente layout rotto. */
.acc-pub-anchors {
padding: 8px 10px;
gap: 6px;
font-size: 12.5px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.acc-pub-anchors::-webkit-scrollbar { display: none; }
.acc-pub-anchors-label {
position: sticky;
left: 0;
background: var(--acc-blue-lt);
padding-right: 6px;
z-index: 1;
flex-shrink: 0;
}
.acc-pub-anchors a { padding: 5px 10px; flex-shrink: 0; }
.acc-pub-section { padding: 16px 16px; }
.acc-pub-section-title { font-size: 15.5px; flex-wrap: wrap; }
.acc-pub-section-count { margin-left: 0; }
/* Timeline su mobile: dot più piccolo, badge a piena larghezza
per evitare overlap con la data. */
.acc-pub-timeline-item { padding-left: 22px; }
.acc-pub-tl-content { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.acc-pub-tl-badge { white-space: normal; word-break: normal; }
.acc-pub-tl-date { font-size: 11.5px; }
}
@media (max-width: 380px) {
.acc-pub-hero-code { font-size: 16px; }
.acc-pub-hero-meta-item dd { font-size: 13.5px; }
.acc-pub-anchors a { font-size: 11.5px; padding: 4px 8px; }
.acc-pub-comm { padding: 10px 11px; }
.acc-pub-comm-badge { font-size: 10.5px; padding: 2px 7px; }
.acc-pub-comm-date { font-size: 11px; }
/* Sul mobilino il bottone Esci diventa più compatto, e su screens
molto stretti possiamo nascondere il testo lasciando solo l'icona. */
.acc-pub-hero-logout { padding: 5px 10px; font-size: 11.5px; }
}
/* ── Prompt "Hai un'altra pratica?" — link discreto a fondo pagina ────── */
/* Quando il cittadino sta GIÀ visualizzando una pratica, niente form
duplicato a fondo: solo un prompt minimale che invita a usare il
bottone "Esci" (stesso flusso di logout, niente cookie residui). */
.acc-tracking-search-hint {
margin: 18px 0 0;
padding: 12px 16px;
background: #f7f9fc;
border: 1px solid var(--acc-border);
border-radius: var(--acc-radius);
font-size: 13px;
color: #4a5663;
text-align: center;
line-height: 1.5;
}
.acc-tracking-search-hint .icon,
.acc-tracking-search-hint svg {
fill: var(--acc-blue);
color: var(--acc-blue);
vertical-align: middle;
margin-right: 4px;
}
.acc-tracking-search-hint a {
color: var(--acc-blue);
font-weight: 600;
text-decoration: underline;
}
.acc-tracking-search-hint a:hover,
.acc-tracking-search-hint a:focus {
color: var(--acc-navy);
text-decoration: underline;
}
/* ─────────────────────────────────────────────────────────────────
ACCESSIBILITÀ — Skip-link (WCAG 2.1 — 2.4.1 Bypass Blocks)
Visibile solo quando riceve il focus da tastiera; permette agli
utenti screen-reader/keyboard di saltare a "main content".
───────────────────────────────────────────────────────────────── */
.acc-skip-link {
position: absolute;
top: -40px;
left: 12px;
z-index: 100000;
background: #06337a;
color: #fff !important;
padding: 10px 18px;
border-radius: 0 0 6px 6px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
transition: top 0.15s ease-out;
}
.acc-skip-link:focus,
.acc-skip-link:focus-visible {
top: 0;
outline: 3px solid #ffd60a;
outline-offset: 2px;
}
/* Region wrapper: rimuove l'outline di default sul focus programmatico
senza compromettere l'accessibilità (lo screen-reader annuncia la
region). */
#acc-content:focus {
outline: none;
}
#acc-content:focus-visible {
outline: 2px dashed #06337a;
outline-offset: 4px;
}
/* ─────────────────────────────────────────────────────────────────
PRIVACY & SESSIONE — checkbox "Ricordami" sul form di ricerca
+ banner sicurezza sessione nell'hero della pratica + countdown.
Conformità: GDPR art. 25 (privacy by design/default).
───────────────────────────────────────────────────────────────── */
/* ─── Checkbox "Ricordami su questo dispositivo" ───────────────────
Composta da due righe distinte:
1. linea principale (checkbox + testo)
2. avviso PC pubblico, separato visivamente con divisore sottile
Bordo sinistro accent per richiamare il tema privacy/sicurezza. */
.acc-tracking-remember {
margin: 4px 0 20px;
padding: 14px 16px 14px 18px;
background: linear-gradient(0deg, #f4f8fc 0%, #fafcfe 100%);
border: 1px solid #d1dcec;
border-left: 4px solid var(--acc-navy, #06337a);
border-radius: 8px;
box-shadow: 0 1px 0 rgba(15, 40, 90, 0.04);
}
.acc-tracking-remember-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 14.5px;
line-height: 1.5;
color: #1c2c44;
user-select: none;
}
.acc-tracking-remember-label input[type="checkbox"] {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
cursor: pointer;
accent-color: var(--acc-navy, #06337a);
transition: transform 0.1s ease;
}
.acc-tracking-remember-label input[type="checkbox"]:hover {
transform: scale(1.05);
}
.acc-tracking-remember-label input[type="checkbox"]:focus-visible {
outline: 2px solid var(--acc-navy, #06337a);
outline-offset: 2px;
border-radius: 3px;
}
.acc-tracking-remember-text {
flex: 1 1 auto;
display: block;
}
.acc-tracking-remember-text strong {
color: #06337a;
font-weight: 700;
}
/* Avviso PC pubblico: riga indipendente, icona ambra con sfondo soft */
.acc-tracking-remember-hint {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed #d1dcec;
font-size: 13px;
line-height: 1.5;
color: #6f4400;
}
.acc-tracking-remember-hint::before {
content: "";
flex: 0 0 auto;
width: 22px;
height: 22px;
margin-top: 1px;
background: #fef0d6;
border: 1px solid #f3c97a;
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,