/* ============================================================================
   Araldo Scuola — Documenti e Annunci (Revisione 2, B9; tavole 10–10c e
   14–14k di docs/Revisione2/04_WEB_SCUOLA.md; docs/WEB_SCUOLA.md §5nonies)

   Documenti: area Archivio, striscia ardesia. Due colonne: l'albero delle
   cartelle a sinistra, a destra le tessere e i documenti con «chi lo vede».
   Le etichette sono quelle dei gruppi (sezioni.css), piu' l'oliva dei gruppi
   e il «dalla cartella» tenue. Si appoggia a persone.css (testata, tab, badge).
   Annunci: area Comunicare, un elenco con «Letto da 71 su 104» e la barretta,
   la finestra con «com'e' nell'app» a sinistra e le letture a destra.
   ========================================================================== */

:root { --oliva: #E4E9C9; --oliva-testo: #4F5E1D; --doc-nuovo: #A84A1C; }

body[data-modulo="documenti"] .contenuto, body[data-modulo="annunci"] .contenuto { gap: 16px; }
.doc-testa .pagina-azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- Le finestre grandi (finestre.js), con la striscia dell'area --------------- */
.finestra.fg { width: 1060px; max-height: calc(100vh - 96px); }
.velo:has(.fg) { padding-top: 64px; }
.fg-striscia { height: 6px; flex: none; background: var(--striscia-colore, var(--striscia-archivio)); }
body[data-modulo="annunci"] .fg-striscia { background: var(--striscia-comunicare); }
.fg-testa { display: flex; align-items: center; gap: 14px; padding: 14px 20px 12px 24px; border-bottom: 1px solid var(--linea); flex: none; }
.fg-ico { width: 46px; height: 46px; flex: none; border-radius: 10px; background: var(--tessera-archivio); color: var(--tessera-icona); display: inline-flex; align-items: center; justify-content: center; }
body[data-modulo="annunci"] .fg-ico { background: var(--tessera-comunicare); }
.fg-ico .ico { width: 24px; height: 24px; }
.fg-titoli { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fg-titoli h2 { font-size: 23px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-titoli .sub { font-size: 14px; color: var(--testo-2); font-weight: 600; }
.fg-azioni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fg-conta { font-size: 14px; font-weight: 700; color: var(--testo-2); }
.fg-corpo { padding: 18px 24px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.fg-due { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.fg-due.stretta { grid-template-columns: 340px minmax(0, 1fr); }
.fg-due > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 900px) { .fg-due, .fg-due.stretta { grid-template-columns: minmax(0, 1fr); } }
.fg h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.fg h3 .spazio { flex: 1; }

/* --- Due colonne --------------------------------------------------------- */
.doc-corpo { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .doc-corpo { grid-template-columns: minmax(0, 1fr); } .doc-albero { display: none; } }
.doc-albero { position: sticky; top: calc(var(--testa-alta) + var(--striscia-alta) + 12px); display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--superficie); border: 1px solid var(--riquadro-bordo); border-radius: 12px; box-shadow: var(--ombra-riquadro); max-height: calc(100vh - var(--testa-alta) - var(--striscia-alta) - 24px); overflow-y: auto; }
.doc-albero .alb-titolo { font-size: 12px; font-weight: 800; color: var(--testo-2); text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px 4px; }
.alb-voce { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--inchiostro); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; width: 100%; }
.alb-voce:hover { background: var(--marchio-tinta-chiara); }
.alb-voce[aria-current="true"] { background: var(--marchio-tinta); color: var(--marchio); }
.alb-voce.sopra { outline: 2px dashed var(--marchio); outline-offset: -2px; }
.alb-voce .ico { width: 16px; height: 16px; flex: none; color: var(--testo-2); }
.alb-voce[aria-current="true"] .ico { color: var(--marchio); }
.alb-voce .nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alb-voce .n { font-size: 12px; color: var(--testo-2); font-weight: 800; }
.alb-voce .lucchetto { width: 13px; height: 13px; }
.alb-voce.liv-1 { padding-left: 26px; } .alb-voce.liv-2 { padding-left: 42px; } .alb-voce.liv-3 { padding-left: 58px; } .alb-voce.liv-4 { padding-left: 74px; }
.alb-radice { margin-top: 6px; }
.alb-radice:first-child { margin-top: 0; }
.nuovi { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--doc-nuovo); color: #FFF; font-size: 11px; font-weight: 800; }
.doc-nuovo { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--doc-nuovo); color: #FFF; font-size: 10px; font-weight: 900; letter-spacing: .04em; }

.doc-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.doc-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.doc-barra .campo-gruppo { flex: 1 1 260px; max-width: 420px; }
.doc-barra .spazio { flex: 1; }
.doc-percorso { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--testo-2); }
.doc-percorso button { border: 0; background: transparent; padding: 2px 6px; border-radius: 6px; color: var(--marchio); font-weight: 800; font-size: 14px; cursor: pointer; }
.doc-percorso button:hover { background: var(--marchio-tinta-chiara); }
.doc-percorso .ico { width: 14px; height: 14px; }
.doc-percorso [aria-current] { color: var(--inchiostro); padding: 2px 6px; }

/* La testa della cartella (14b) */
.doc-cartella-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 20px; background: var(--superficie); border: 1px solid var(--riquadro-bordo); border-radius: 12px; box-shadow: var(--ombra-riquadro); }
.doc-cartella-testa .ico-cartella { width: 48px; height: 48px; border-radius: 12px; background: var(--tessera-archivio); color: var(--tessera-icona); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.doc-cartella-testa .ico-cartella .ico { width: 24px; height: 24px; }
.doc-cartella-testa .ico-cartella.personale { background: var(--personale-tinta); color: #3A4D68; }
.doc-cartella-testa .testo { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.doc-cartella-testa .testo h2 { font-size: 22px; line-height: 26px; }
.doc-cartella-testa .testo .sotto { font-size: 13px; color: var(--testo-2); font-weight: 700; }
.doc-cartella-testa .chi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.doc-cartella-testa .chi .titoletto { font-size: 12px; font-weight: 800; color: var(--testo-2); text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.doc-cartella-testa .azioni { display: flex; align-items: center; gap: 8px; }
.doc-sezione-titolo { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--testo-2); text-transform: uppercase; letter-spacing: .03em; }
.doc-sezione-titolo .spazio { flex: 1; }
.doc-sezione-titolo .pls { text-transform: none; letter-spacing: 0; }

/* Tessere delle cartelle (14) */
.doc-tessere { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.doc-tessera { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--superficie); border: 1px solid var(--riquadro-bordo); border-radius: 12px; box-shadow: var(--ombra-riquadro); color: var(--inchiostro); text-align: left; cursor: pointer; min-height: 110px; }
.doc-tessera:hover { border-color: var(--marchio); }
.doc-tessera.sopra { outline: 3px dashed var(--marchio); outline-offset: 2px; }
.doc-tessera .tes-testa { display: flex; align-items: center; gap: 10px; }
.doc-tessera .tes-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--tessera-archivio); color: var(--tessera-icona); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.doc-tessera .tes-ico.personale { background: var(--personale-tinta); color: #3A4D68; }
.doc-tessera .tes-ico .ico { width: 18px; height: 18px; }
.doc-tessera .tes-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.doc-tessera .tes-nome b { font-family: var(--font-titoli); font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-tessera .tes-nome span { font-size: 12px; color: var(--testo-2); font-weight: 700; }
.doc-tessera .etichette { min-height: 22px; }
.doc-tessera .menu { position: absolute; right: 8px; top: 8px; }
.doc-tessera .menu .pls { opacity: .5; }
.doc-tessera:hover .menu .pls, .doc-tessera .menu .pls[aria-expanded="true"] { opacity: 1; }
.doc-tessera .tes-nuovi { position: absolute; right: 12px; bottom: 12px; }
.doc-tessera.nuova-cartella { border-style: dashed; justify-content: center; align-items: center; color: var(--testo-2); font-weight: 800; min-height: 110px; background: transparent; box-shadow: none; }
.doc-tessera.nuova-cartella:hover { color: var(--marchio); }

/* I documenti: righe (14b) e griglia (14g) */
.doc-lista { background: var(--superficie); border: 1px solid var(--riquadro-bordo); border-radius: 12px; box-shadow: var(--ombra-riquadro); overflow: hidden; }
.doc-riga { display: grid; grid-template-columns: 28px 44px minmax(220px, 2.2fr) minmax(160px, 1.6fr) minmax(140px, 1fr) 40px 44px; gap: 12px; align-items: center; min-height: 60px; padding: 6px 16px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.doc-riga:last-child { border-bottom: 0; }
.doc-riga:hover { background: var(--marchio-tinta-chiara); }
.doc-riga.scelta { background: var(--marchio-tinta-chiara); }
.doc-riga > * { min-width: 0; }
.doc-riga .scegli { width: 18px; height: 18px; accent-color: var(--marchio); margin: 0; }
.doc-riga.sola-lettura { grid-template-columns: 44px minmax(220px, 2.2fr) minmax(160px, 1.6fr) minmax(140px, 1fr) 40px; }
.doc-tipo { width: 40px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; letter-spacing: .04em; background: var(--sabbia); color: var(--testo-3); text-transform: uppercase; overflow: hidden; flex: none; }
.doc-tipo.pdf { background: #FFE1DE; color: #B3261E; }
.doc-tipo.img { background: #DDF0F8; color: #136C99; padding: 0; }
.doc-tipo.img img { width: 100%; height: 100%; object-fit: cover; }
.doc-tipo.doc { background: #DDE8FF; color: #1F4FB8; }
.doc-tipo.xls { background: var(--presente-tinta); color: var(--presente-testo); }
.doc-riga .titolo { display: flex; flex-direction: column; line-height: 1.25; }
.doc-riga .titolo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.doc-riga .titolo small { font-size: 12px; color: var(--testo-2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-riga .quando { font-size: 13px; color: var(--testo-2); font-weight: 700; display: flex; flex-direction: column; line-height: 1.25; }
.doc-riga .quando b { color: var(--inchiostro); font-size: 13px; }
.doc-riga .menu { justify-self: end; position: relative; }
.doc-riga .menu .pls, .doc-riga .pls-scarica { opacity: .55; }
.doc-riga:hover .menu .pls, .doc-riga:hover .pls-scarica, .doc-riga .menu .pls[aria-expanded="true"] { opacity: 1; }
.doc-riga .menu .tendina { top: 40px; right: 0; }
.doc-percorso-riga { font-size: 12px; color: var(--marchio); font-weight: 800; }
@media (max-width: 900px) { .doc-riga { grid-template-columns: 28px 44px minmax(0, 1fr) 40px 44px; } .doc-riga > :nth-child(4), .doc-riga > :nth-child(5) { display: none; } }
.doc-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.doc-foto { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--sabbia); border: 0; padding: 0; cursor: zoom-in; }
.doc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-foto .nome { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #FFF; font-size: 12px; font-weight: 800; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-foto .scegli { position: absolute; left: 8px; top: 8px; width: 18px; height: 18px; accent-color: var(--marchio); }
.doc-foto .doc-nuovo { position: absolute; right: 8px; top: 8px; }
.barra-scelti .pls { height: 34px; }

/* Le etichette in piu' rispetto ai gruppi */
.etichetta-chi.e-gruppo { background: var(--oliva); color: var(--oliva-testo); }
.etichetta-chi.e-tutti { background: var(--tessera-archivio); color: #2B4466; }
.etichetta-chi.e-nessuno { background: var(--pericolo-tinta); color: var(--pericolo); }
.etichetta-chi.e-ruolo_legame, .etichetta-chi.e-mansione { background: transparent; border: 1.5px solid var(--linea-campo); color: var(--testo-3); }
.etichetta-chi.tenue { opacity: .62; }
.etichetta-chi .ico { width: 13px; height: 13px; }
.etichetta-da { font-size: 11px; color: var(--testo-2); font-weight: 700; font-style: italic; align-self: center; }
.chi-vede { display: flex; flex-direction: column; gap: 10px; }
.chi-vede .chi-filtri { align-items: center; }
.chi-vede .etichetta-filtro { font-size: 12px; font-weight: 800; color: var(--testo-2); }
.chi-eredita { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--sabbia); }
.chi-vede .riassunto-chi b { color: var(--inchiostro); }

/* «Guarda come li vede» (14h) */
.doc-come { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; background: #DDF0F8; color: #0F4C70; font-weight: 700; font-size: 14px; }
.doc-come .spazio { flex: 1; }
.doc-come .pls { height: 34px; }

/* Il documento (14d) */
.doc-anteprima { display: flex; flex-direction: column; gap: 10px; }
.doc-anteprima .quadro { border-radius: 12px; background: var(--sabbia); min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.doc-anteprima .quadro img { max-width: 100%; max-height: 420px; display: block; }
.doc-anteprima .quadro iframe { width: 100%; height: 440px; border: 0; background: #FFF; }
.doc-anteprima .quadro .doc-tipo { width: 72px; height: 84px; font-size: 14px; }
.doc-nell-app { display: flex; flex-direction: column; gap: 6px; }
.doc-nell-app .titoletto { font-size: 12px; font-weight: 800; color: var(--testo-2); text-transform: uppercase; letter-spacing: .03em; }
.app-riga { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #FFF; border: 1px solid var(--riquadro-bordo); border-left: 5px solid #58A7E6; font-size: 14px; }
.app-riga.personale { border-left-color: var(--marchio); }
.app-riga .testo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.app-riga .testo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-riga .testo span { font-size: 12px; color: var(--testo-2); font-weight: 700; }
.doc-dati { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--testo-2); font-weight: 700; }
.doc-dati b { color: var(--inchiostro); }

/* Carica (14e) */
.car-file { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea); }
.car-file:first-child { border-top: 0; }
.car-file .campo { flex: 1; height: 38px; }
.car-file small { font-size: 12px; color: var(--testo-2); font-weight: 700; white-space: nowrap; }
.car-file .barra { height: 4px; border-radius: 2px; background: var(--sabbia); overflow: hidden; width: 80px; }
.car-file .barra i { display: block; height: 100%; width: 0; background: var(--presente); transition: width .3s; }
.car-file .esito { width: 18px; height: 18px; color: var(--presente); }
.car-trascina { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 2px dashed var(--campo-bordo); border-radius: 12px; color: var(--testo-2); font-weight: 700; font-size: 14px; cursor: pointer; }
.car-trascina:hover, .car-trascina.sopra { border-color: var(--marchio); color: var(--marchio); background: var(--marchio-tinta-chiara); }
.car-dove { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--sabbia); font-size: 14px; font-weight: 700; }

/* Trascinare sulla pagina (14j) */
.doc-drop { position: fixed; inset: 0; z-index: 300; background: rgba(18, 59, 53, .35); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.doc-drop > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 40px; border-radius: 16px; background: var(--superficie); box-shadow: var(--ombra-finestra); border: 3px dashed var(--marchio); color: var(--inchiostro); }
.doc-drop b { font-family: var(--font-titoli); font-weight: 600; font-size: 22px; }
.doc-drop span { font-size: 14px; color: var(--testo-2); font-weight: 700; }
.doc-drop .ico { width: 36px; height: 36px; color: var(--marchio); }

/* Sposta: l'albero da scegliere */
.sposta-albero { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; padding: 6px; }
.sposta-albero .alb-voce[aria-pressed="true"] { background: var(--marchio-tinta); color: var(--marchio); }

/* --- Annunci (10-10c) ------------------------------------------------------ */
.colonne-annunci { grid-template-columns: minmax(260px, 3fr) minmax(130px, 1.1fr) minmax(130px, 1.2fr) minmax(160px, 1.5fr) 44px; }
@media (max-width: 1000px) { .colonne-annunci { grid-template-columns: minmax(220px, 3fr) minmax(130px, 1.2fr) 44px; } .colonne-annunci .col-chi, .colonne-annunci .col-quando { display: none; } }
.ann-titolo { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ann-titolo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ann-titolo small { font-size: 12px; color: var(--testo-2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-letture { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--testo-3); }
.ann-letture small { font-size: 12px; color: var(--testo-2); }
.ann-barra { height: 6px; border-radius: 3px; background: var(--sabbia); overflow: hidden; display: flex; }
.ann-barra i { display: block; height: 100%; }
.ann-barra .letti { background: var(--presente); }
.ann-barra .ricevuti { background: var(--uscito-tinta); }
.ann-programmato { color: var(--assente-testo); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.ann-programmato .ico { width: 13px; height: 13px; }
.ann-app { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--chat-fondo, #EFEAE2); }
.ann-app .ann-app-testa { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--testo-2); }
.ann-app .ann-app-testa .avatar { --lato: 32px; background: var(--tessera-comunicare); color: var(--tessera-icona); }
.ann-bolla { align-self: flex-start; max-width: 100%; padding: 8px 12px 6px; border-radius: 12px; background: #FFF6E0; border: 1px solid #F3E0B5; font-size: 15px; font-weight: 600; line-height: 1.4; box-shadow: var(--ombra-riquadro); }
.ann-bolla .firma { display: block; font-size: 12px; font-weight: 800; color: var(--testo-2); margin-bottom: 2px; }
.ann-bolla .testo { white-space: pre-wrap; word-break: break-word; }
.ann-bolla .testo:empty::before { content: "Il testo dell'annuncio…"; color: var(--testo-2); font-style: italic; }
.ann-bolla .piede { text-align: right; font-size: 11px; font-weight: 700; color: var(--testo-2); margin-top: 3px; }
.ann-bolla .allegati { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.ann-bolla .allegati img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--sabbia); }
.ann-bolla .allegati .pdf { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linea-campo); background: rgba(255,255,255,.7); font-size: 13px; font-weight: 700; cursor: pointer; }
.ann-a-chi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ann-a-chi button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--riquadro-bordo); background: var(--superficie); text-align: left; cursor: pointer; color: var(--inchiostro); font-weight: 700; font-size: 14px; }
.ann-a-chi button[aria-pressed="true"] { border-color: var(--marchio); background: var(--marchio-tinta-chiara); }
.ann-a-chi button .ico { color: var(--testo-2); flex: none; }
.ann-a-chi button span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ann-a-chi button small { font-size: 12px; color: var(--testo-2); font-weight: 700; }
.ann-quando { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ann-quando input.campo { width: auto; height: 38px; }
.ann-letture-lista { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; }
.ann-letture-lista .riga { padding: 8px 12px; border-top: 1px solid var(--linea); font-size: 14px; }
.ann-letture-lista .riga:first-child { border-top: 0; }
.ann-letture-lista .riga .avatar { --lato: 30px; font-size: 11px; }
.ann-letture-lista .stato { font-size: 12px; font-weight: 800; }
.ann-letture-lista .stato.letto { color: var(--presente-testo); }
.ann-letture-lista .stato.ricevuto { color: var(--uscito-testo); }
.ann-letture-lista .stato.no { color: var(--testo-2); }
.ann-testo textarea.campo { min-height: 160px; resize: vertical; line-height: 1.45; }
.ann-allegati { display: flex; flex-wrap: wrap; gap: 6px; }
.ann-allegati .anteprima { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--sabbia); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--testo-3); text-align: center; padding: 4px; }
.ann-allegati .anteprima img { width: 100%; height: 100%; object-fit: cover; }
.ann-allegati .anteprima button { position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border-radius: 10px; border: 0; background: rgba(0,0,0,.55); color: #FFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ann-allegati .anteprima button .ico { width: 11px; height: 11px; }
.ann-allegati .anteprima .barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.2); }
.ann-allegati .anteprima .barra i { display: block; height: 100%; width: 0; background: var(--presente); }
.ann-nota-sezione { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--testo-2); font-weight: 700; }

/* Il visore delle immagini (come nella Chat) */
.visore { position: fixed; inset: 0; z-index: 130; background: rgba(0, 0, 0, .88); display: flex; align-items: center; justify-content: center; }
.visore img { max-width: 92vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.visore button { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #FFF; display: flex; align-items: center; justify-content: center; }
.visore button:hover { background: rgba(255, 255, 255, .3); }
.visore .chiudi { top: 16px; right: 16px; }
.visore .prima { left: 16px; top: 50%; margin-top: -22px; }
.visore .dopo { right: 16px; top: 50%; margin-top: -22px; }
.visore .scarica { bottom: 16px; right: 16px; }
.visore .conteggio { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #FFF; font-size: 13px; font-weight: 800; }