/* Aspetto del sito: colori e misure in un posto solo (variabili CSS), caratteri di sistema (nessun font scaricato da fuori). */

:root {
    --blu: #1f3a5f;
    --blu-scuro: #152b47;
    --blu-chiaro: #e8eef6;
    --accento: #e0662f;
    --testo: #1f2733;
    --testo-tenue: #5b6574;
    --sfondo: #f4f6f9;
    --carta: #ffffff;
    --bordo: #dfe4ea;
    --raggio: 10px;
    --ombra: 0 1px 2px rgba(20, 33, 61, 0.06), 0 4px 14px rgba(20, 33, 61, 0.06);
}

html, body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    margin: 0;
    color: var(--testo);
    background: var(--sfondo);
}

main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.2rem 1.5rem 3rem;
    animation: comparsa-pagina 0.25s ease-out both;
}

h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.4rem 0 0.8rem; }
h2 { font-size: 1.25rem; }
a { color: #245a9b; }

.testata {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    height: 56px;
    box-sizing: border-box;
    padding: 0 1.5rem;
    background: linear-gradient(90deg, var(--blu-scuro), var(--blu));
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.testata nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; }
.testata a {
    color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.6rem; border-radius: 8px; transition: background 0.15s;
}
.testata a:hover { background: rgba(255, 255, 255, 0.12); }
.testata a.active { background: rgba(255, 255, 255, 0.18); }
.testata .utente { margin-left: 0.8rem; opacity: 0.8; font-size: 0.9rem; }
/* Lingua dell'interfaccia (§ 18): "IT EN", quella in uso evidenziata. */
.scelta-lingua { display: inline-flex; align-items: center; gap: 0.1rem; margin: 0 0.3rem; font-size: 0.78rem; letter-spacing: 0.04em; }
.scelta-lingua strong { padding: 0.2rem 0.4rem; border-radius: 6px; background: rgba(255, 255, 255, 0.2); }
.testata .scelta-lingua a { padding: 0.2rem 0.4rem; opacity: 0.7; }
.testata .scelta-lingua a:hover { opacity: 1; }
.marchio { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 600; white-space: nowrap; }
.logo-agenzia { height: 30px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }
.nome-piattaforma { font-size: 1.05rem; letter-spacing: 0.01em; }
/* Versione della piattaforma: la stessa del pacchetto installato sulla VM. */
.versione-piattaforma { font-size: 0.72rem; font-weight: 400; opacity: 0.65; margin-left: -0.3rem; }

.icona { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

/* Solo l'opacità: un'animazione di "transform" su main farebbe da riferimento agli elementi fissi al suo interno
   (la barra di stato della regia finirebbe in fondo alla pagina invece che in fondo allo schermo). */
@keyframes comparsa-pagina { from { opacity: 0; } to { opacity: 1; } }

/* Filigrana "SIMULAZIONE" su ogni vista (§ 14): sopra tutto, ma non intercetta i clic. */
.filigrana {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9vw;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(200, 0, 0, 0.07);
    transform: rotate(-25deg);
    pointer-events: none;
    z-index: 1000;
    user-select: none;
}

.nota { color: #666; font-size: 0.9rem; }
.errore { color: #b00020; font-weight: 600; }
.avviso { background: #fff4ce; border-left: 4px solid #e0a800; padding: 0.5rem 0.8rem; }
.testo { white-space: pre-line; line-height: 1.5; }
.ruolo { font-style: italic; color: #555; }

.modulo { display: flex; flex-direction: column; gap: 0.6rem; max-width: 360px; }
.modulo label { display: flex; flex-direction: column; gap: 0.2rem; }
.modulo input[type=checkbox] { align-self: flex-start; }

.tabella { border-collapse: separate; border-spacing: 0; width: 100%; margin: 1rem 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); }
.tabella th, .tabella td { border-bottom: 1px solid #edf0f4; padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; }
.tabella tr:last-child td { border-bottom: none; }
.tabella th { background: #eef2f7; font-weight: 600; font-size: 0.92rem; color: #34425a; }

.riquadro-link { background: #e8f4ea; border: 1px solid #9ccc9f; padding: 0.6rem 1rem; margin: 1rem 0; }
.riquadro-link input.link { width: 100%; font-family: Consolas, monospace; }

.scelta a { margin-right: 0.8rem; }
.scelta a.scelto { font-weight: 700; }
.pronto { margin-top: 2rem; }

button {
    cursor: pointer; font: inherit; font-size: 0.92rem; color: var(--testo);
    background: var(--carta); border: 1px solid #c8d0da; border-radius: 7px; padding: 0.3rem 0.75rem;
    transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
button:hover:not(:disabled) { background: #f0f4f9; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: default; }
input, select, textarea { font: inherit; border: 1px solid #c8d0da; border-radius: 7px; padding: 0.3rem 0.5rem; background: #fff; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid #7aa7e0; outline-offset: 1px; }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1001;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Orologio simulato */
.orologio-avviso { margin-left: 0.6rem; font-size: 0.82rem; background: #e0a800; color: #222; padding: 0.15rem 0.6rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.3rem; animation: stato-entra 0.35s ease-out both; }
.orologio-avviso.pausa { background: #f5c518; animation: stato-entra 0.35s ease-out both, pulsa 2s ease-in-out 0.35s infinite; }
.orologio-avviso.attesa { background: #cfd8e3; }
.orologio-avviso.conclusa { background: #9aa6b5; color: #fff; }
.orologio-avviso.ripresa { background: #2f9e57; color: #fff; }
@keyframes stato-entra { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(245, 197, 24, 0); } }
.quadrante { background: #fff; border: 1px solid #ddd; padding: 0.8rem 1rem; margin: 1rem 0; }
.quadrante .orologio.regia { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.quadrante button { margin-left: 0.5rem; }
.comandi { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.riga-comando { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.tabella tr.corrente td { background: #fff4ce; font-weight: 600; }

/* Posta */
.posta { display: grid; grid-template-columns: 220px 320px 1fr; gap: 1rem; align-items: start; }
.cartelle .casella { margin: 0.8rem 0; }
.cartelle .nome-casella { font-weight: 600; font-size: 0.9rem; }
.cartelle a { display: block; cursor: pointer; padding: 0.15rem 0.4rem; color: #1f3a5f; }
.cartelle a.attiva { background: #dde7f3; font-weight: 600; }
.elenco-messaggi { max-height: 75vh; overflow-y: auto; border: 1px solid #ddd; background: #fff; }
.riga-messaggio { padding: 0.45rem 0.6rem; border-bottom: 1px solid #eee; cursor: pointer; }
.riga-messaggio.non-letto { font-weight: 700; }
.riga-messaggio.selezionato { background: #eef4fb; }
.riga-testa { display: flex; justify-content: space-between; gap: 0.5rem; }
.ora { color: #666; font-size: 0.85rem; white-space: nowrap; }
.gestito { color: #2f6b2f; font-size: 0.85rem; }
.dettaglio { background: #fff; border: 1px solid #ddd; padding: 0.8rem 1rem; min-height: 300px; }
.intestazione { border-bottom: 1px solid #eee; padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.modulo-email { display: flex; flex-direction: column; gap: 0.5rem; }
.modulo-email label { display: flex; flex-direction: column; gap: 0.15rem; }
.modulo-email input, .modulo-email textarea, .modulo-email select { width: 100%; box-sizing: border-box; }
.rubrica { display: flex; gap: 0.4rem; }
.rubrica select { flex: 1; }
.azioni { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
button.primario { background: var(--blu); color: #fff; border: 1px solid var(--blu); padding: 0.35rem 0.95rem; font-weight: 600; }
button.primario:hover:not(:disabled) { background: var(--blu-scuro); }
button.piccolo { font-size: 0.8rem; }

/* Bozze condivise e approvazione (§ 9) */
.etichetta-bozza { display: inline-block; font-size: 0.78rem; font-weight: 400; color: #5a4a00; background: #fff4c2; padding: 0 0.4rem; border-radius: 3px; }
.condivisione { border: 1px solid #ddd; padding: 0.5rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
.condivisione legend { font-weight: 600; font-size: 0.9rem; }
.modulo-email label.in-linea { display: inline-flex; flex-direction: row; align-items: center; gap: 0.25rem; margin-right: 0.8rem; }
.modulo-email input[type=checkbox] { width: auto; }
.condivisione select { width: auto; max-width: 100%; }
.catena { margin: 0.3rem 0; padding-left: 1.4rem; }
.catena li { margin: 0.15rem 0; }
.catena li.approvato { color: #2f6b2f; }
.catena li.rimandato { color: #a02020; }
.catena li.in-attesa { font-weight: 600; }
.nota-approvazione { font-style: italic; color: #444; margin-left: 0.5rem; }
.approvazione { border-top: 1px solid #eee; margin-top: 0.8rem; padding-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.approvazione label { display: flex; flex-direction: column; gap: 0.15rem; }
.approvata { color: #2f6b2f; font-weight: 600; margin: 0.2rem 0; }

/* Chat */
.chat { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; }
.conversazione { padding: 0.4rem 0.6rem; cursor: pointer; border-bottom: 1px solid #eee; }
.conversazione.selezionato { background: #eef4fb; }
.conversazione.non-letto { font-weight: 700; }
.contatore { background: #d6293e; color: #fff; border-radius: 10px; padding: 0 0.45rem; font-size: 0.78rem; font-weight: 700; margin-left: 0.3rem; min-width: 0.7rem; text-align: center; display: inline-block; animation: salta 0.45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes salta { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
.scelta-membri { display: flex; flex-direction: column; max-height: 180px; overflow-y: auto; margin: 0.3rem 0; }
.conversazione-aperta { background: #fff; border: 1px solid #ddd; padding: 0.8rem 1rem; }
.messaggi-chat { max-height: 55vh; overflow-y: auto; margin: 0.6rem 0; }
.riga-chat { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.35rem 0; }
.riga-chat.mia { flex-direction: row-reverse; }
.riga-chat:last-child { animation: messaggio-entra 0.3s ease-out both; }
.messaggio-chat { padding: 0.45rem 0.7rem; background: #f1f4f8; border-radius: 12px 12px 12px 4px; max-width: 78%; }
.messaggio-chat.mio { background: #dce8f7; border-radius: 12px 12px 4px 12px; }
@keyframes messaggio-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.conversazione { display: flex; align-items: center; gap: 0.5rem; }
.nome-conversazione { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.membri { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; }
.membri .nota { margin-left: 0.4rem; }
.avatar.gruppo { background: #6c7a8c; }
.avatar.gruppo .icona { width: 16px; height: 16px; }
.mittente { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.scrivi-chat { display: flex; gap: 0.5rem; align-items: flex-end; }
.scrivi-chat textarea { flex: 1; }
.membri, .aggiungi-membro { font-size: 0.9rem; margin-bottom: 0.4rem; }

/* Regia */
.schede button { padding: 0.3rem 0.9rem; }
.schede button.attiva { background: #1f3a5f; color: #fff; }
tr.cliccabile { cursor: pointer; }
.conversazione-regia { background: #fff; border: 1px solid #ddd; margin: 0.5rem 0; padding: 0.4rem 0.8rem; }

/* Avvisi a comparsa: entrano da destra, uno dopo l'altro se arrivano insieme, ed escono sfumando. */
.avvisi { position: fixed; bottom: 4.4rem; right: 1rem; width: 340px; display: flex; flex-direction: column; gap: 0.5rem; z-index: 1002; pointer-events: none; }
.avviso-comparsa {
    position: relative; pointer-events: auto; cursor: pointer;
    background: #fff; color: #222; border-left: 4px solid #1f3a5f; border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); padding: 0.55rem 2rem 0.55rem 0.8rem;
    animation: avviso-entrata 0.35s ease-out both;
}
.avviso-comparsa.uscita { animation: avviso-uscita 0.4s ease-in forwards; animation-delay: 0s !important; }
.avviso-titolo { font-weight: 600; font-size: 0.9rem; }
.avviso-testo { font-size: 0.85rem; color: #444; margin-top: 0.15rem; }
.avviso-comparsa .chiudi { position: absolute; top: 0.2rem; right: 0.3rem; border: none; background: none; font-size: 1.1rem; color: #888; }
@keyframes avviso-entrata { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes avviso-uscita { to { transform: translateX(110%); opacity: 0; } }
.testata .contatore { margin-left: 0.3rem; }
/* Obblighi di notifica ancora lontani dal termine: grigio; in scadenza o scaduti tornano rossi. */
.contatore.neutro { background: #5b6b7f; }
.catena .ora { margin-left: 0.4rem; }

/* Social (§ 8): tre colonne come i social veri, ma con un aspetto proprio. */
.social { display: grid; grid-template-columns: 190px minmax(0, 1fr) 240px; gap: 1.2rem; align-items: start; }
.social-menu { position: sticky; top: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
.social-menu a { color: #222; text-decoration: none; padding: 0.4rem 0.6rem; border-radius: 18px; }
.social-menu a.attiva, .social-menu a:hover { background: #e8eef6; font-weight: 600; }
.social-logo { font-size: 1.4rem; font-weight: 700; color: #1f3a5f; padding: 0.2rem 0.6rem 0.6rem; }
.come-account { margin-top: 1rem; padding: 0.5rem; border-top: 1px solid #ddd; }
.come-account select { max-width: 100%; }
.social-centro { background: #fff; border: 1px solid #e3e3e3; min-height: 60vh; }
.social-destra { position: sticky; top: 0.5rem; display: flex; flex-direction: column; gap: 0.8rem; }
.social-destra .cerca { width: 100%; box-sizing: border-box; padding: 0.45rem 0.8rem; border: 1px solid #ccc; border-radius: 18px; }
.tendenze { background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 0.5rem 0.8rem; }
.tendenze h3 { margin: 0.2rem 0 0.5rem; font-size: 1rem; }
.tendenze > div { padding: 0.25rem 0; }
.titolo-vista { margin: 0; padding: 0.7rem 1rem; border-bottom: 1px solid #eee; font-size: 1.15rem; }
.cliccabile { cursor: pointer; }

.compositore { padding: 0.8rem 1rem; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 0.35rem; }
.compositore textarea { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid #ddd; border-radius: 8px; padding: 0.5rem; resize: vertical; }
.compositore .azioni { align-items: center; margin-top: 0; }
.conteggio { text-align: right; }
.carica-immagine { cursor: pointer; font-size: 0.9rem; color: #1f3a5f; }
.carica-immagine input[type=file] { display: none; }
.opzioni-post { border-top: 1px dashed #ddd; padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ora-uscita { width: 5rem; }
.nuovi-post { display: block; width: 100%; border: none; border-bottom: 1px solid #eee; background: #eef4fb; color: #1f3a5f; padding: 0.55rem; cursor: pointer; font-weight: 600; }

.post { border-bottom: 1px solid #eee; padding: 0.7rem 1rem; }
.post.compatto { border: 1px solid #e3e3e3; border-radius: 10px; margin: 0.5rem 0; padding: 0.5rem 0.7rem; }
.post.non-pubblicato { background: #fffbea; }
.post-riga { display: flex; gap: 0.7rem; }
.post-corpo { flex: 1; min-width: 0; }
.post-testa { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: baseline; }
.post-testa .nome { font-weight: 700; }
.handle { color: #666; font-size: 0.9rem; }
.verificato { color: #fff; background: #3b82c4; border-radius: 50%; font-size: 0.6rem; padding: 0.05rem 0.25rem; }
.post-testo { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.2rem 0 0.3rem; cursor: pointer; }
.hashtag, .menzione { color: #2a6db0; cursor: pointer; }
.post-immagine { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; margin: 0.4rem 0; border: 1px solid #eee; }
.post-azioni { display: flex; gap: 1.1rem; align-items: center; color: #555; font-size: 0.9rem; position: relative; }
.post-azioni .azione { background: none; border: none; color: #555; cursor: pointer; padding: 0.1rem 0.2rem; font-size: 0.9rem; }
.post-azioni .azione:disabled { cursor: default; opacity: 0.6; }
.post-azioni .azione.attiva { color: #c0392b; font-weight: 700; }
.post-azioni .statistica { cursor: default; }
.menu-condividi { position: relative; }
.menu-condividi .menu { position: absolute; top: 1.6rem; left: 0; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: flex; flex-direction: column; z-index: 5; min-width: 13rem; }
.menu-condividi .menu button { background: none; border: none; text-align: left; padding: 0.5rem 0.8rem; cursor: pointer; }
.menu-condividi .menu button:hover { background: #f2f5f9; }
.condiviso-da { color: #666; font-size: 0.85rem; margin: 0 0 0.3rem 2.8rem; }
.secondo-livello { margin-left: 2.8rem; border-left: 2px solid #eee; }
.in-risposta-a { color: #666; font-size: 0.85rem; padding: 0.4rem 1rem 0; }
.post-principale .post { background: #f7f9fc; }
.post-principale .post-testo { font-size: 1.1rem; }

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: inline-block; }
.avatar.iniziali { color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.avatar.grande { width: 80px; height: 80px; font-size: 1.6rem; }
.avatar.piccolo { width: 28px; height: 28px; font-size: 0.7rem; }
.profilo { display: flex; gap: 1rem; padding: 1rem; border-bottom: 1px solid #eee; }
.profilo h2 { margin: 0; }
.riga-account { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid #eee; }

.notifica { padding: 0.6rem 1rem; border-bottom: 1px solid #eee; }
.notifica.non-letta { background: #eef4fb; }
.notifica .icona { display: inline-block; width: 1.4rem; }
.notifica .anteprima { color: #555; margin-left: 1.4rem; }
.riga-bozza { padding: 0.6rem 1rem; border-bottom: 1px solid #eee; }
.social .approvazione { padding: 0.5rem 1rem 1rem; }
.social .avviso, .social .errore { margin: 0.5rem 1rem; }
.social > .social-centro > p, .social-centro > button.piccolo { margin-left: 1rem; }
.anteprime-post { margin-top: 0.4rem; max-width: 520px; }
.senza-sottolineatura { text-decoration: none; color: inherit; display: block; }

/* Web: browser simulato (§ 3, § 16.1). Esistono solo i siti della sessione (mondo chiuso). */
.web { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.browser { border: 1px solid #c9ced6; border-radius: 8px; overflow: hidden; background: #fff; }
.schede-browser { display: flex; gap: 2px; background: #dfe3e8; padding: 0.35rem 0.35rem 0; overflow-x: auto; }
.scheda { display: flex; align-items: center; gap: 0.3rem; background: #eef0f3; border-radius: 6px 6px 0 0; padding: 0.3rem 0.5rem; max-width: 220px; cursor: pointer; font-size: 0.85rem; }
.scheda.attiva { background: #fff; }
.titolo-scheda { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chiudi-scheda, .nuova-scheda { background: none; border: none; cursor: pointer; color: #555; }
.barra { display: flex; gap: 0.4rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid #e3e3e3; background: #fff; }
.barra .indirizzo { flex: 1; border: 1px solid #ccc; border-radius: 16px; padding: 0.3rem 0.8rem; font-size: 0.9rem; }
.barra .indietro { background: none; border: none; font-size: 1.1rem; cursor: pointer; }
.pagina-web { min-height: 60vh; padding: 0 0 1rem; }
.motore { text-align: center; padding: 2rem 1rem 1rem; }
.motore-nome { font-size: 1.8rem; font-weight: 700; color: #1f3a5f; margin-bottom: 0.6rem; }
.cerca-web { width: min(520px, 90%); padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 20px; }
.siti-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; padding: 1rem; }
.sito-tessera { border: 1px solid #e3e3e3; border-radius: 8px; padding: 0.6rem; text-align: center; font-size: 0.9rem; }
.sito-logo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #1f3a5f; color: #fff; font-weight: 700; font-size: 0.85rem; }
.pagina-web h3, .pagina-web h2 { margin: 0.8rem 1rem 0.4rem; }
.risultato, .riga-articolo { padding: 0.6rem 1rem; border-bottom: 1px solid #f0f0f0; }
.risultato-titolo { font-weight: 600; color: #1a4d8f; }
.testata-sito { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-bottom: 3px solid #1f3a5f; }
.nome-sito { font-size: 1.4rem; font-weight: 700; font-family: Georgia, "Times New Roman", serif; }
.pagine-sito { display: flex; gap: 1rem; padding: 0.5rem 1rem; border-bottom: 1px solid #eee; font-size: 0.9rem; color: #1a4d8f; }
.articolo { padding: 0.5rem 1.5rem 1rem; max-width: 720px; }
.articolo h1 { font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; margin: 0.4rem 0; }
.articolo-testo { white-space: pre-wrap; line-height: 1.55; margin-top: 0.8rem; }
.articolo-immagine { max-width: 100%; border-radius: 6px; margin-top: 0.6rem; }
.genere { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; color: #a0521b; font-weight: 700; }
.non-raggiungibile { padding: 2rem; color: #444; }
.web-lato { display: flex; flex-direction: column; gap: 0.6rem; }
.compositore-web { background: #fff; border: 1px solid #e3e3e3; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
.compositore-web h3 { margin: 0.2rem 0; }
.compositore-web label { display: flex; flex-direction: column; gap: 0.15rem; }
.compositore-web input, .compositore-web textarea, .compositore-web select { width: 100%; box-sizing: border-box; font: inherit; }
.compositore-web label.in-linea { display: inline-flex; flex-direction: row; align-items: center; gap: 0.25rem; margin-right: 0.8rem; }
.compositore-web input[type=checkbox] { width: auto; }
.compositore-web .azioni { flex-wrap: wrap; }
.anteprima-articolo { border: 1px solid #e3e3e3; border-left: 3px solid #1f3a5f; border-radius: 6px; padding: 0.4rem 0.7rem; margin: 0.4rem 0; background: #fff; }

/* Console del regista (passo 7) */
.da-fare { border: 1px solid #e0a800; background: #fffbea; border-radius: 6px; padding: 0.6rem 0.8rem; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.da-fare label { display: flex; flex-direction: column; gap: 0.15rem; }
.da-fare textarea, .da-fare input { width: 100%; box-sizing: border-box; font: inherit; }
.guida { color: #5a4a00; }
.condizione { color: #333; }
.proposta-ai { background: #eef4ff; border-left: 3px solid #3b6fd8; padding: 0.3rem 0.5rem; }
.griglia-inject { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.pulsante-inject { padding: 0.6rem; border: 1px solid #1f3a5f; background: #eef4fb; border-radius: 6px; cursor: pointer; text-align: left; }
.tabella tr.da-fare-riga { background: #fffbea; }
.tabella tr.eseguito td { color: #555; }
.tabella tr.saltato td { color: #999; text-decoration: line-through; }
.collegato { color: #2f8f3a; font-size: 0.85rem; margin-left: 0.4rem; }
.modulo-regia { display: flex; flex-direction: column; gap: 0.4rem; max-width: 640px; background: #fff; border: 1px solid #e3e3e3; padding: 0.7rem; }
.modulo-regia label { display: flex; flex-direction: column; gap: 0.15rem; }
.modulo-regia textarea, .modulo-regia input, .modulo-regia select { font: inherit; box-sizing: border-box; width: 100%; }
.messaggio-regia { border-bottom: 1px solid #eee; padding: 0.4rem 0; max-width: 760px; }
.messaggio-regia.avviso { border-left: 3px solid #b8860b; padding-left: 0.5rem; }
/* Avviso di regia ai partecipanti: fuori dal gioco, deve sembrare diverso da tutto ciò che è simulato. */
.avvisi-regia { position: fixed; top: 4.2rem; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 0.4rem; width: min(640px, 92vw); }
.avviso-regia { background: #222; color: #fff; border: 2px dashed #f5c518; border-radius: 8px; padding: 0.6rem 0.8rem; display: flex; gap: 0.6rem; align-items: center; box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.etichetta-regia { color: #f5c518; font-weight: 700; white-space: nowrap; }
.testo-regia { flex: 1; }
.avviso-regia button { background: #f5c518; border: none; padding: 0.3rem 0.7rem; cursor: pointer; font-weight: 600; }
.canale-regia { margin-top: 0.8rem; max-width: 760px; }
.ok { color: #2f6b2f; font-weight: 600; }
.due-colonne { display: flex; gap: 0.6rem; }
.due-colonne label { flex: 1; }
.vedi-come { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.vedi-come h2 { margin-top: 0.6rem; }

/* Borsa e reputazione (passo 7) */
.indicatori { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.8rem; margin: 0.5rem 0 1.2rem; }
.indicatore { background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; padding: 0.6rem 0.8rem; }
.valore-indicatore { font-size: 1.5rem; font-weight: 700; margin: 0.2rem 0; }
.su { color: #2f8f3a; font-weight: 600; }
.giu { color: #c0392b; font-weight: 600; }
.grafico-indicatore { width: 100%; height: 80px; display: block; }
.grafico-indicatore .asse { stroke: #ddd; stroke-width: 1; }
.grafico-indicatore .linea { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke: #2f8f3a; }
.grafico-indicatore .linea.giu { stroke: #c0392b; }
.grafico-etichette { display: flex; justify-content: space-between; font-size: 0.75rem; color: #777; }
.comando-indicatore { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.comando-indicatore input[type=number] { width: 5.5rem; }
.comando-indicatore input { flex: 1; min-width: 0; }

/* Agenti (passo 8) */
.stato-pausa { color: #8a5a00; font-weight: 600; }
.stato-attivi { color: #1a7f37; font-weight: 600; }
.testo-lungo { white-space: pre-wrap; word-break: break-word; max-height: 24rem; overflow: auto; font-size: 0.85rem; background: #f7f7f7; padding: 0.4rem; }
.fatti-agenti { display: flex; flex-direction: column; gap: 0.5rem; }
.fatti-agente label { display: flex; flex-direction: column; gap: 0.15rem; }
.fatti-agente textarea { width: 100%; box-sizing: border-box; font: inherit; }

/* Vista unica del figurante (passo 8) */
.personaggio-figurante { border: 1px solid #ddd; border-radius: 6px; background: #fff; padding: 0.6rem 0.8rem; margin: 0.8rem 0; }
.da-gestire { border-top: 1px solid #eee; padding: 0.5rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.suggerimento { background: #eef4ff; border-left: 3px solid #3b6fd8; padding: 0.4rem 0.6rem; }
.testo-suggerito { white-space: pre-wrap; }
a.pulsante { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid #888; border-radius: 4px; background: #f4f4f4; color: inherit; text-decoration: none; }

/* Debriefing (passo 9) */
.filtri { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: end; margin: 0.5rem 0; }
.filtri label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; }
.tabella.cronologia tr.umano { background: #f3f8ff; }
.nota-osservatore { background: #fff8e6; border-left: 3px solid #d09a00; padding: 0.3rem 0.5rem; margin: 0.3rem 0; }
.scrivi-nota { display: flex; gap: 0.5rem; align-items: start; margin: 0.4rem 0; }
.scrivi-nota textarea { flex: 1; font: inherit; }
.dati-evento { font-family: Consolas, monospace; word-break: break-all; }
.tabella tr.riga-ok { background: #eefaf0; }
.tabella tr.riga-ko { background: #fdeeee; }
.non-letta { color: #b00020; font-weight: 600; }
.testo-lungo-semplice { white-space: pre-wrap; }
.griglie { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.griglia { border: 1px solid #ddd; border-radius: 6px; background: #fff; padding: 0.5rem 0.8rem; }
.modulo-griglia { display: flex; flex-direction: column; gap: 0.4rem; max-width: 40rem; }
.modulo-griglia label { display: flex; flex-direction: column; gap: 0.15rem; }
.modulo-griglia textarea, .modulo-griglia input { font: inherit; }
.valutazione { border: 1px solid #ddd; border-radius: 6px; background: #fff; padding: 0.6rem 0.8rem; margin: 0.8rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.valutazione textarea { width: 100%; box-sizing: border-box; font: inherit; }
.stato-valutazione { font-weight: 600; }
.esito-sì { color: #1a7f37; font-weight: 600; }
.esito-in-parte { color: #8a5a00; font-weight: 600; }
.esito-no { color: #b00020; font-weight: 600; }

/* Riquadri: stessa carta per le aree principali. */
.dettaglio, .conversazione-aperta, .elenco-messaggi, .quadrante, .social-centro, .browser, .indicatore, .personaggio-figurante, .valutazione, .griglia, .modulo-regia, .compositore-web {
    border-radius: var(--raggio); border-color: var(--bordo); box-shadow: var(--ombra);
}
.avviso { border-radius: 6px; }
.social-logo { display: flex; align-items: center; gap: 0.45rem; }
.social-logo .icona { color: var(--accento); width: 1.3em; height: 1.3em; stroke-width: 2.2; }

/* Chi preferisce meno movimento (impostazione del sistema operativo): niente animazioni. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Preparazione: persone e personaggi */
.con-avatar { display: inline-flex; align-items: center; gap: 0.45rem; }
.azioni-riga { white-space: nowrap; }
.azioni-riga button { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.1rem 0; }
.assegna { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.assegna input { min-width: 10rem; }
input.email { width: 100%; min-width: 14rem; box-sizing: border-box; }
h2 .icona { color: var(--accento); }

/* Testata del partecipante: tutto su una riga (orologio, personaggio, menu). */
.testata > * { flex: none; }
.testata nav { flex: 1 1 auto; justify-content: flex-end; }
.testata nav a { padding: 0.3rem 0.45rem; font-size: 0.93rem; }
.orologio-avviso { white-space: nowrap; }
.scelta-personaggio { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
/* Blazor mette il focus sul titolo a ogni cambio di pagina (per i lettori di schermo): senza riquadro visibile. */
h1:focus { outline: none; }
/* Video nei post e negli articoli: riquadro come le immagini, con i comandi del browser. */
video.post-immagine, video.articolo-immagine { background: #000; width: 100%; max-height: 520px; }
.messaggio-regia.domanda { border-left: 3px solid var(--accento); padding-left: 0.5rem; background: #fff7f1; }

/* Documenti di ruolo */
.documenti { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
.elenco-documenti { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; }
.riga-documento { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid #eef1f5; cursor: pointer; }
.riga-documento:last-child { border-bottom: none; }
.riga-documento.selezionato { background: #eef4fb; }
.riga-documento.non-letto { font-weight: 700; }
.riga-documento .icona { color: var(--accento); }
.dettaglio.documento h2 { margin-top: 0.2rem; }
.dettaglio.documento .testo { line-height: 1.55; }

/* Schermi fino a 1500 px: con il logo dell'agenzia il titolo della piattaforma si toglie, e il menu si stringe (testata su una riga). */
@media (max-width: 1500px) {
    .logo-agenzia + .nome-piattaforma { display: none; }
    .testata nav a { padding: 0.3rem 0.35rem; font-size: 0.9rem; gap: 0.25rem; }
}

/* Posta: ricerca, anteprima, etichette personali (§ 16.2) */
.cerca-posta { display: flex; gap: 0.4rem; padding: 0.45rem; border-bottom: 1px solid #eee; background: #fafbfd; position: sticky; top: 0; }
.cerca-posta input { flex: 1; min-width: 0; }
.anteprima-posta { color: var(--testo-tenue); font-size: 0.82rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etichetta-posta { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; font-weight: 600; color: #7a3b12; background: #fde6d6; border-radius: 999px; padding: 0.05rem 0.5rem; margin: 0.1rem 0.2rem 0.1rem 0; }
.etichetta-posta .togli { border: none; background: none; padding: 0 0.1rem; font-size: 0.9rem; line-height: 1; color: #7a3b12; }
.organizza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.4rem 0 0.6rem; }
.organizza input { width: 9rem; font-size: 0.85rem; }
.cartelle a .etichetta-posta { margin: 0; }

/* Telefono (§ 16.2): chiamate perse e messaggi in segreteria */
:is(.telefono, .pubblico) .nuova-chiamata { color: var(--accento); font-weight: 600; }
.telefono .verso { font-weight: 700; width: 1.1rem; text-align: center; }
.telefono .verso.arrivo { color: #b3261e; }
.telefono .verso.uscita { color: var(--testo-tenue); }
:is(.telefono, .autorita, .pubblico) .riga-chiamata { display: flex; flex-direction: column; line-height: 1.25; }
:is(.telefono, .autorita, .pubblico) .riga-chiamata small { color: var(--testo-tenue); font-weight: 400; }
.segreteria { border: 1px solid var(--bordo); border-left: 3px solid var(--accento); border-radius: var(--raggio); padding: 0.6rem 0.8rem; margin: 0.6rem 0 0.9rem; background: #fafbfd; }
.etichetta-segreteria { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--testo-tenue); margin-bottom: 0.35rem; }
.dettaglio.documento label { display: block; margin: 0.5rem 0; }
.dettaglio.documento select, .dettaglio.documento textarea { width: 100%; }

/* Checklist del piano di crisi (§ 16.2) */
.checklist { list-style: none; padding: 0; margin: 0 0 1.2rem; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
.checklist li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.3rem 1rem; padding: 0.5rem 0.8rem; border-bottom: 1px solid #eef1f5; }
.checklist li:last-child { border-bottom: none; }
.checklist label { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.checklist input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
.checklist li.fatta .voce { color: var(--testo-tenue); text-decoration: line-through; }
.checklist li.scaduta .voce { color: #b3261e; }
.checklist .dettagli { display: flex; gap: 0.7rem; font-size: 0.82rem; color: var(--testo-tenue); }
.checklist .chi-quando { color: #1e7a3c; font-weight: 600; }

/* Portale delle autorità (§ 16.3): stato di ogni obbligo di notifica, ricevuta con il protocollo, conferma prima dell'invio. */
.stato-obbligo { display: inline-block; font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.55rem; background: #e8edf3; color: #3d4b5c; white-space: nowrap; }
.stato-obbligo.in-scadenza { background: #fff1c7; color: #7a5300; }
.stato-obbligo.scaduto { background: #fde2e1; color: #a1251b; }
.stato-obbligo.inviata { background: #dcf3e3; color: #1e6b37; }
.stato-obbligo.ritardo { background: #fde8d4; color: #8a3d00; }
.stato-obbligo.non-ancora { background: #f1f1f1; color: #777; }
.segreteria.ricevuta { border-left-color: #1e6b37; }
/* Pubblico di prova (§ 16.3): una scheda per gruppo, con il giudizio da molto negativa (g0) a molto positiva (g4). */
.pubblico-gruppi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.7rem; margin: 0.6rem 0 1rem; }
.pubblico-gruppo { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 0.6rem 0.8rem; background: #fafbfd; }
.pubblico-testa { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.pubblico-reazione { font-style: italic; margin: 0.3rem 0; line-height: 1.45; }
.pubblico-gruppo .nota { margin: 0.25rem 0; }
.giudizio { font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.55rem; white-space: nowrap; }
.giudizio.g0 { background: #fde2e1; color: #a1251b; }
.giudizio.g1 { background: #fde8d4; color: #8a3d00; }
.giudizio.g2 { background: #e8edf3; color: #3d4b5c; }
.giudizio.g3 { background: #e3f3e8; color: #1e6b37; }
.giudizio.g4 { background: #c9ecd5; color: #145227; }
.pubblico-scelta { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 0.4rem 0.8rem 0.6rem; margin: 0.5rem 0; }
.pubblico-scelta label { display: inline-flex !important; align-items: center; gap: 0.3rem; margin: 0.2rem 1rem 0.2rem 0 !important; }
.attesa-pubblico::before { content: ""; display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.45rem; border: 2px solid var(--accento); border-right-color: transparent; border-radius: 50%; vertical-align: -0.1rem; animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
/* Intervista scritta (§ 16.3): domande del giornalista a sinistra, risposte a destra. */
.intervista { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.6rem 0 1rem; }
.battuta { max-width: 80%; border-radius: var(--raggio); padding: 0.5rem 0.75rem; border: 1px solid var(--bordo); }
.battuta.domanda { align-self: flex-start; background: #f3f5f9; }
.battuta.risposta { align-self: flex-end; background: #eef4fb; border-color: #c9dbef; }
.battuta .chi { font-size: 0.8rem; font-weight: 700; color: var(--testo-tenue); margin-bottom: 0.2rem; }
.battuta .chi .ora { font-weight: 400; margin-left: 0.4rem; }
/* Bozze di scenario (§ 16.3): errori e avvisi del validatore. */
.segnalazioni { max-height: 18rem; overflow-y: auto; font-size: 0.85rem; margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; }
.avviso-conferma { background: #fff6dd; border: 1px solid #f0d78a; border-radius: var(--raggio); padding: 0.5rem 0.75rem; margin: 0.5rem 0; }

/* Leggibilità Gulpease e preset di viralità (§ 16.2) */
.leggibilita { display: inline-block; font-size: 0.8rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.55rem; white-space: nowrap; }
.leggibilita-facile { background: #dff3e4; color: #1e6b35; }
.leggibilita-media { background: #eef3d8; color: #56630f; }
.leggibilita-difficile { background: #fdeccd; color: #8a5300; }
.leggibilita-molto-difficile { background: #fbdcda; color: #9b1c14; }
.preset-viralita { display: flex; gap: 0.2rem; margin-top: 0.3rem; }
.preset-viralita button.attivo { background: var(--accento); color: #fff; border-color: var(--accento); }

/* ------------------------------------------------------------------------------------------------------------
   Cornice (ottobre 2026): applicazioni in testata, barra di stato in basso come in Windows, comandi a gruppi
   come un ribbon (posta del partecipante, console di regia).
   ------------------------------------------------------------------------------------------------------------ */

/* Applicazioni del partecipante in testata: ognuna con il suo nome; quella aperta sottolineata. */
.testata nav.applicazioni { flex: 0 1 auto; align-self: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 0; margin-right: auto; margin-left: 0.6rem; }
.testata nav.applicazioni a { height: 100%; box-sizing: border-box; padding: 0 0.75rem; gap: 0.45rem; border-radius: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; color: #d6e0ee; font-size: 0.95rem; white-space: nowrap; }
.testata nav.applicazioni a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.testata nav.applicazioni a.active { color: #fff; font-weight: 600; background: rgba(255, 255, 255, 0.12); border-bottom-color: var(--accento); }
@media (max-width: 1350px) {
    .testata nav.applicazioni a { padding: 0 0.5rem; font-size: 0.9rem; }
}
/* Con tutte le applicazioni (telefono, documenti, autorità, pubblico di prova, intervista) i nomi italiani non stanno in 1440 pixel:
   sotto i 1700 si tolgono le icone della testata, restano nomi e contatori. Se ancora non basta, la barra scorre da sola
   invece di allargare la pagina. */
@media (max-width: 1700px) {
    .testata nav.applicazioni a .icona { display: none; }
}
.testata nav.applicazioni { min-width: 0; overflow-x: auto; scrollbar-width: thin; }

/* Barra di stato in basso: chi sei (o quale sessione, per la regia), l'ora simulata, il resto. */
.barra-stato {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; height: 54px; box-sizing: border-box;
    display: flex; align-items: center; gap: 0.3rem; padding: 0 0.9rem;
    background: var(--blu-scuro); color: #fff; box-shadow: 0 -2px 10px rgba(20, 33, 61, 0.18);
}
.barra-stato a { display: inline-flex; align-items: center; gap: 0.4rem; color: #d6e0ee; text-decoration: none; font-size: 0.9rem; padding: 0.4rem 0.6rem; border-radius: 8px; white-space: nowrap; }
.barra-stato a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.barra-stato a.active { color: #fff; background: rgba(255, 255, 255, 0.14); }
.barra-stato .separatore { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.16); margin: 0 0.4rem; flex: none; }
.barra-stato .centro { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: 0.7rem; min-width: 0; }
.barra-stato .orologio-testo { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.barra-stato.regia .orologio-testo { font-size: 1.15rem; }
.barra-stato .fase { font-size: 0.85rem; color: #d6e0ee; white-space: nowrap; }
.barra-stato a.da-vedere { color: #ffd0d6; }
.chi-sono { display: inline-flex; align-items: center; gap: 0.6rem; padding-right: 0.3rem; min-width: 0; }
.chi-sono .avatar { width: 34px; height: 34px; }
.chi-sono-testo { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chi-sono-testo .nome { font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.chi-sono-testo .ruolo { font-style: normal; font-size: 0.75rem; color: #aebcd0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20rem; }
.agisci-come { display: inline-flex; align-items: center; gap: 0.35rem; }
.agisci-come .etichetta { font-size: 0.75rem; color: #aebcd0; white-space: nowrap; }
.barra-stato a.scelta-personaggio { padding: 0; border-radius: 50%; opacity: 0.8; transition: opacity 0.15s, transform 0.15s; }
.barra-stato a.scelta-personaggio:hover { opacity: 1; transform: scale(1.1); background: none; }
.pallino { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.pallino.acceso { background: #3fbf73; }
.pallino.fermo { background: #9aa6b5; }
/* Il contenuto non finisce sotto la barra; l'avviso d'errore di Blazor le sta sopra. */
body:has(.barra-stato) main { padding-bottom: 5.5rem; }
body:has(.barra-stato) #blazor-error-ui { bottom: 54px; }
@media (max-width: 1350px) {
    .chi-sono-testo .ruolo { max-width: 12rem; }
    .barra-stato a { padding: 0.4rem 0.45rem; }
}

/* Pausa: fascia gialla sotto la testata, oltre al bollino nella barra di stato. */
.fascia-pausa {
    position: fixed; top: 56px; left: 0; right: 0; z-index: 49;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1.2rem;
    background: #ffe8a3; color: #5c4300; border-bottom: 1px solid #f0d27a; font-size: 0.95rem;
    animation: stato-entra 0.35s ease-out both;
}
body:has(.fascia-pausa) main { padding-top: 3.4rem; }
body:has(.fascia-pausa) .avvisi-regia { top: 6.8rem; }

/* Comandi a gruppi, come un ribbon: icona sopra, nome sotto, nome del gruppo in fondo. */
.barra-comandi {
    display: flex; align-items: stretch; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
    box-shadow: var(--ombra); padding: 0.35rem 0.4rem 0.3rem; margin: 0 0 1rem; overflow-x: auto;
}
.gruppo-comandi { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.15rem; padding: 0 0.45rem; border-right: 1px solid var(--bordo); flex: none; }
.gruppo-comandi:last-child, .gruppo-comandi:has(+ .cerca-comandi) { border-right: none; }
.gruppo-comandi .pulsanti { display: flex; gap: 0.1rem; }
.nome-gruppo { font-size: 0.68rem; color: var(--testo-tenue); letter-spacing: 0.06em; text-transform: uppercase; }
.comando {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
    min-width: 4.4rem; max-width: 6.4rem; min-height: 3.6rem; padding: 0.2rem 0.45rem; box-sizing: border-box;
    border: none; border-radius: 8px; background: transparent; color: var(--testo);
    font: inherit; font-size: 0.8rem; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer;
}
.comando:hover:not(:disabled) { background: var(--blu-chiaro); color: var(--testo); }
.comando .icona { width: 1.45rem; height: 1.45rem; color: var(--blu); }
.comando:disabled { opacity: 1; color: #9aa6b5; }
.comando:disabled .icona { color: #c2cad6; }
.comando.attiva { background: #dfe8f4; color: var(--blu-scuro); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accento); }
.comando .contatore { position: absolute; top: 0.1rem; right: 0.5rem; margin: 0; }
.cerca-comandi { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.4rem; flex: none; }
.cerca-comandi .cerca { display: flex; align-items: center; gap: 0.4rem; border: 1px solid #c8d0da; border-radius: 999px; padding: 0.3rem 0.8rem; background: #fff; color: var(--testo-tenue); width: 16rem; }
.cerca-comandi .cerca input { border: none; outline: none; padding: 0; font-size: 0.9rem; flex: 1; min-width: 0; background: transparent; }

/* Canale fuori servizio (§ 16.3): al posto della pagina, il servizio che non risponde; nel menu la voce spenta. */
.fuori-servizio { display: flex; gap: 1rem; align-items: flex-start; background: var(--carta); border: 1px dashed #c8d0da; border-radius: var(--raggio); padding: 1.4rem 1.6rem; max-width: 760px; color: var(--testo-tenue); }
.fuori-servizio .icona { width: 2.4rem; height: 2.4rem; color: #9aa6b5; }
.fuori-servizio strong { color: var(--testo); font-size: 1.1rem; }
.fuori-servizio p { margin: 0.3rem 0 0; }
.testata nav.applicazioni a.fuori-servizio { opacity: 0.5; text-decoration: line-through; }

/* Documenti per il cliente e per i partecipanti (§ 16.4): rapporto, attestati, questionario. Niente testata della piattaforma,
   niente filigrana; pensati per la stampa (o per salvare in PDF dal browser). */
main.documento { max-width: 860px; background: var(--carta); padding: 2rem 2.6rem 3rem; margin: 1.2rem auto; border-radius: var(--raggio); box-shadow: var(--ombra); }
.documento h1 { font-size: 1.9rem; margin-top: 0.2rem; }
.documento h2 { font-size: 1.2rem; color: var(--blu); border-bottom: 2px solid var(--blu-chiaro); padding-bottom: 0.25rem; margin-top: 1.8rem; }
.documento .tabella { box-shadow: none; font-size: 0.92rem; }
.documento .logo-documento { max-height: 52px; max-width: 220px; }
.comandi-stampa { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.bozza-rapporto { color: #b42318; border: 2px solid #b42318; display: inline-block; padding: 0.2rem 0.7rem; border-radius: 6px; font-weight: 700; letter-spacing: 0.04em; }
.copertina { border-bottom: 3px solid var(--accento); padding-bottom: 1rem; margin-bottom: 1rem; }
.sovratitolo { text-transform: uppercase; letter-spacing: 0.08em; color: var(--testo-tenue); font-size: 0.85rem; margin: 1rem 0 0; }
.riservato { font-size: 0.85rem; color: var(--testo-tenue); }
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.piede-documento { margin-top: 2.5rem; font-size: 0.85rem; color: var(--testo-tenue); }
.priorita-alta { color: #b42318; font-weight: 600; }

/* Attestati: uno per pagina. */
.attestato { text-align: center; border: 3px double var(--blu); border-radius: 6px; padding: 2.4rem 2rem; margin: 0 0 2rem; min-height: 22cm; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; }
.attestato .nome-attestato { font-size: 2rem; font-weight: 700; color: var(--blu-scuro); margin: 0.4rem 0; }
.attestato .titolo-attestato { font-size: 1.3rem; font-style: italic; margin: 0.3rem 0 0.8rem; }
.attestato ul { text-align: left; display: inline-block; margin: 0.3rem auto; }
.attestato .firma { display: flex; justify-content: space-between; margin-top: 3rem; font-size: 0.9rem; }
.attestato .firma span { border-top: 1px solid var(--testo-tenue); padding-top: 0.3rem; min-width: 12rem; }

/* Questionario e risultati. */
.domanda { border: 1px solid var(--bordo); border-radius: 8px; padding: 0.7rem 1rem 0.9rem; margin: 0 0 0.9rem; }
.domanda legend { font-weight: 600; padding: 0 0.3rem; }
.scala { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.scala .estremo { color: var(--testo-tenue); font-size: 0.85rem; }
.scala label, .scelte label { display: inline-flex; align-items: center; gap: 0.25rem; }
.scelte { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.domanda textarea { width: 100%; box-sizing: border-box; }
.risultato-domanda { margin: 0.6rem 0 1rem; }
.barre { display: flex; gap: 0.3rem; align-items: flex-end; height: 3rem; margin: 0.3rem 0; }
.barre span { width: 1.6rem; background: var(--blu); color: #fff; font-size: 0.7rem; text-align: center; border-radius: 3px 3px 0 0; min-height: 2px; }
.etichette-barre { display: flex; gap: 0.3rem; font-size: 0.75rem; color: var(--testo-tenue); }
.etichette-barre span { width: 1.6rem; text-align: center; }

@media print {
    @page { margin: 1.6cm; }
    html, body { background: #fff; }
    main.documento { box-shadow: none; margin: 0; padding: 0; max-width: none; border-radius: 0; animation: none; }
    .no-stampa, #components-reconnect-modal { display: none !important; }
    .documento h2 { break-after: avoid; }
    .documento tr, .risultato-domanda { break-inside: avoid; }
    .attestato { break-after: page; margin: 0; min-height: 24cm; }
    .attestato:last-of-type { break-after: auto; }
    .barre span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Simulazioni con poche persone (§ 16.4): il riquadro della preparazione e le impostazioni nella pagina Agenti. */
.riquadro-pochi { background: var(--blu-chiaro); border: 1px solid #c9d6e8; border-radius: var(--raggio); padding: 0.6rem 1rem; margin: 0.6rem 0 1rem; }
.riquadro-pochi p { margin: 0 0 0.5rem; }
.modalita-pochi { display: flex; flex-direction: column; gap: 0.35rem; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 0.6rem 1rem; margin: 0.8rem 0; }