/* Tema scuro della demo: varianti chiare di laguna, filo rosso, ambra e verde */
[data-tema=scuro]{color-scheme:dark;--pagina:#0E2931;--bianco:#15363F;--sabbia:#1B424A;--testo:#E2E2E0;--testo-2:#A9BCBD;--linea:#2A5058;--linea-campo:#6A9196;--petrolio:#6FB3B0;--abisso:#0A1F25;--laguna:#6FB3B0;--filo:#F08A84;--ambra:#E0B354;--ambra-fondo:#3A3320;--verde:#7CC48A;--verde-fondo:#1D3A2C;--rosso-fondo:#3D2329}
@media (prefers-color-scheme:dark){:root:not([data-tema=chiaro]){color-scheme:dark;--pagina:#0E2931;--bianco:#15363F;--sabbia:#1B424A;--testo:#E2E2E0;--testo-2:#A9BCBD;--linea:#2A5058;--linea-campo:#6A9196;--petrolio:#6FB3B0;--abisso:#0A1F25;--laguna:#6FB3B0;--filo:#F08A84;--ambra:#E0B354;--ambra-fondo:#3A3320;--verde:#7CC48A;--verde-fondo:#1D3A2C;--rosso-fondo:#3D2329}}
[data-tema=scuro] .btn-azione,[data-tema=scuro] .btn-azione:hover{color:#0E2931}
[data-tema=scuro] .btn-azione:hover{background:#8CC6C3}
@media (prefers-color-scheme:dark){:root:not([data-tema=chiaro]) .btn-azione{color:#0E2931}:root:not([data-tema=chiaro]) .btn-azione:hover{background:#8CC6C3;color:#0E2931}}

body.app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--pagina);font-size:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline-color:var(--testo);box-shadow:none}

/* Testata */
.app-testa{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--abisso);color:#E2E2E0;min-height:64px;flex:none;border-bottom:1px solid #22474F}
.marchio.chiaro{color:#fff}
.marchio.chiaro b{font-size:23px}
.app-studio{font-weight:600;padding-left:16px;border-left:1px solid #2E5A5F;white-space:nowrap}
.app-avviso{font-size:13px;font-weight:600;color:#E2E2E0;border:1px solid #2E5A5F;border-radius:999px;padding:4px 12px}
.app-azioni{margin-left:auto;display:flex;align-items:center;gap:8px}
.app-azioni .btn{min-height:42px;padding:8px 16px;font-size:15px}
.app-testa .btn-azione{background:#E2E2E0;color:#0E2931}
.app-testa .btn-azione:hover{background:#fff;color:#0E2931}
.app-testa .btn-linea{border-color:#E2E2E0;color:#E2E2E0}
.app-testa .btn-linea:hover{background:#E2E2E0;color:#0E2931}
.app-testa :focus-visible{outline-color:#E2E2E0}
.tondo{width:42px;height:42px;border-radius:50%;border:1.5px solid #4F7A80;background:transparent;color:#E2E2E0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.tondo:hover{border-color:#E2E2E0}
@media (max-width:1100px){.app-avviso{display:none}}
@media (max-width:1000px){.app-studio{display:none}}
@media (max-width:760px){.nascondi-s{display:none}.app-testa{padding:8px 14px;gap:10px}.marchio.chiaro b{font-size:19px}}
@media (max-width:460px){.marchio.chiaro b{display:none}.app-azioni .btn{font-size:14.5px;padding:8px 14px}}

/* Corpo a tre colonne */
.app-corpo{flex:1;min-height:0;display:grid;grid-template-columns:232px minmax(300px,380px) minmax(0,1fr)}
.app-lato{border-right:1px solid var(--linea);padding:18px 14px;overflow:auto;background:var(--pagina)}
.lato-tit{font-size:13px;font-weight:700;color:var(--testo-2);margin:18px 10px 6px}
.lato-tit:first-child{margin-top:0}
.filtri button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:40px;padding:6px 10px;border:0;background:transparent;border-radius:10px;font:500 15px var(--sans);color:var(--testo);cursor:pointer;text-align:left}
.filtri button:hover{background:var(--sabbia)}
.filtri button.on{background:var(--petrolio);color:var(--pagina)}
.filtri button span{font-size:13px;font-weight:600;opacity:.85}
.filtri .pers .nome{display:flex;align-items:center;gap:8px;font-size:15px;opacity:1}
.filtri .pers i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--linea-campo)}
.regole{margin-top:20px;border-top:1px solid var(--linea);padding-top:10px}
.regole summary{padding:10px 10px;font-weight:600;font-size:15px;font-family:var(--sans)}
.regole summary::after{width:9px;height:9px}
.regole-nota{font-size:13.5px;color:var(--testo-2);padding:0 10px 10px}
.regola-riga{display:flex;flex-direction:column;gap:4px;padding:6px 10px;border-radius:10px;transition:background-color .6s}
.regola-riga.nuova{background:var(--verde-fondo)}
.regola-riga label{font-size:13px;font-weight:600;color:var(--testo-2)}
.regola-riga select,#d-persona{font:500 14.5px var(--sans);border:1.5px solid var(--linea-campo);border-radius:10px;padding:7px 10px;background:var(--bianco);color:var(--testo);min-height:40px;width:100%}
.interruttore{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--testo-2);padding:10px 10px 4px}
.interruttore input{width:20px;height:20px;flex:none;accent-color:var(--petrolio)}

/* Lista */
.app-lista{border-right:1px solid var(--linea);display:flex;flex-direction:column;min-height:0;background:var(--bianco)}
.lista-testa{display:flex;justify-content:space-between;align-items:baseline;padding:18px 18px 12px;border-bottom:1px solid var(--linea)}
.lista-testa h1{font-size:32px}
#lista-conta{font-size:14px;color:var(--testo-2)}
.lista{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.voce{border-bottom:1px solid var(--linea)}
.voce button{display:grid;grid-template-columns:10px minmax(0,1fr);gap:4px 12px;width:100%;text-align:left;background:transparent;border:0;padding:14px 18px 14px 14px;cursor:pointer;font:inherit;color:inherit}
.voce button:hover{background:var(--pagina)}
.voce.attiva button{background:var(--pagina);box-shadow:inset 3px 0 0 var(--petrolio)}
.voce .pallino{width:10px;height:10px;border-radius:3px;margin-top:6px;grid-row:span 3}
.voce .r1{display:flex;justify-content:space-between;gap:8px;font-size:15px}
.voce .r1 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voce .r1 span{font-size:13px;color:var(--testo-2);white-space:nowrap}
.voce.non-letta .r1 b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--petrolio);margin-right:7px;vertical-align:2px}
.voce .r2{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voce .r3{font-size:13.5px;color:var(--testo-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.voce .r4{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--sabbia);color:var(--testo);white-space:nowrap}
.tag.urg-alta{background:var(--rosso-fondo);color:var(--filo)}
.tag.urg-alta::before{content:"!";font-weight:800}
.tag.urg-media{background:var(--ambra-fondo);color:var(--ambra)}
.tag.inviata{background:var(--verde-fondo);color:var(--verde)}
.tag.in-invio{background:var(--ambra-fondo);color:var(--ambra)}
.tag.nuova{background:var(--petrolio);color:var(--pagina)}
.lista-vuota{padding:24px 18px;color:var(--testo-2)}

/* Dettaglio */
.app-dettaglio{overflow:auto;min-height:0;padding:24px clamp(18px,3vw,40px) 60px;outline:none;background:var(--pagina)}
.det-vuoto{height:100%;display:flex;align-items:center;justify-content:center;color:var(--testo-2)}
.indietro{display:none;background:transparent;border:0;font:600 15px var(--sans);color:var(--testo);min-height:44px;padding:0;cursor:pointer;margin-bottom:6px}
.indietro::before{content:"";width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:10px}
.det-testa{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.det-testa h2{font-size:clamp(26px,2.4vw,34px)}
.det-da{margin-top:6px;color:var(--testo-2);font-size:15px}
.det-da b{color:var(--testo)}
.det-meta{display:flex;gap:10px;align-items:center;color:var(--testo-2);font-size:13.5px}
.canale{color:var(--testo-2)}
.det-msg{margin-top:18px;background:var(--bianco);border:1px solid var(--linea);border-radius:14px;padding:18px 20px;white-space:pre-line;line-height:1.65;max-width:760px}
.det-msg mark{color:inherit;background:transparent;padding:0 1px;border-radius:3px}
.det-msg mark.indizio{box-shadow:inset 0 -2px 0 var(--laguna);background:rgba(43,117,116,.10)}
.det-msg mark.data{background:var(--ambra-fondo);color:var(--ambra);font-weight:600}
.det-msg mark.delicato{background:var(--rosso-fondo);color:var(--filo);font-weight:600}
.legenda{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13px;color:var(--testo-2)}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda i{width:16px;height:10px;border-radius:3px;display:inline-block}
.ev-indizio{background:rgba(43,117,116,.18);box-shadow:inset 0 -2px 0 var(--laguna)}
.ev-data{background:var(--ambra-fondo);box-shadow:inset 0 0 0 1px var(--ambra)}
.ev-delicato{background:var(--rosso-fondo);box-shadow:inset 0 0 0 1px var(--filo)}

.capito{margin-top:28px;max-width:880px}
.capito h3,.risposta h3,.manca h3{font-size:28px}
.sintesi{margin-top:8px;font-size:18px}
.griglia-capito{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:14px;overflow:hidden;margin:14px 0 0}
@media (max-width:1250px){.griglia-capito{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.griglia-capito{grid-template-columns:1fr}}
.griglia-capito>div{background:var(--bianco);padding:12px 14px;min-width:0}
.griglia-capito .assegnata{grid-row:span 2}
@media (max-width:520px){.griglia-capito .assegnata{grid-row:auto}}
.griglia-capito dt{font-size:13px;font-weight:700;color:var(--testo-2);margin-bottom:6px}
.griglia-capito dd{margin:0;font-size:15px}
.griglia-capito dd ul{margin:0;padding-left:18px}
.griglia-capito .vuoto{color:var(--testo-2);font-size:14px;margin-top:4px}
.cat-et{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.cat-et i{width:10px;height:10px;border-radius:3px;display:block;flex:none}
.livello{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:700;padding:2px 9px;border-radius:999px}
.livello.alta{background:var(--verde-fondo);color:var(--verde)}
.livello.media{background:var(--ambra-fondo);color:var(--ambra)}
.livello.bassa{background:var(--rosso-fondo);color:var(--filo)}
.perche{margin-top:10px;border:0}
.perche:last-child{border:0}
.perche summary{padding:6px 0;min-height:36px;font-size:14px;font-weight:600;color:var(--petrolio);justify-content:flex-start;gap:8px}
.perche summary::after{width:8px;height:8px;border-color:currentColor}
.perche div{font-size:14px;color:var(--testo-2);display:flex;flex-direction:column;gap:8px;padding-bottom:4px}
.perche b{color:var(--testo)}
.link-btn{background:none;border:0;padding:0;font:600 14px var(--sans);color:var(--petrolio);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:flex-start;min-height:32px}
.proposta{margin-top:14px;background:var(--verde-fondo);border-radius:12px;padding:14px 16px}
.proposta p{color:var(--testo)}
.proposta .pulsanti{margin-top:10px}
.proposta .btn,.conferma .btn{min-height:42px;padding:8px 16px;font-size:15px}

.manca{margin-top:28px;max-width:880px}
.manca-nota{font-size:14px;color:var(--testo-2);margin-top:4px}
#d-manca{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.voce-manca{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--bianco);border:1px solid var(--linea);border-radius:10px;cursor:pointer}
.voce-manca input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--petrolio)}
.voce-manca.tolta span{color:var(--testo-2);text-decoration:line-through}
.manca .vuoto{color:var(--testo-2);font-size:15px}

.risposta{margin-top:28px;max-width:880px}
.risposta-testa{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.stato-et{font-size:13px;font-weight:700;padding:3px 11px;border-radius:999px;background:var(--ambra-fondo);color:var(--ambra)}
.stato-et.inviata{background:var(--verde-fondo);color:var(--verde)}
.stato-et.archiviata{background:var(--sabbia);color:var(--testo-2)}
#d-bozza{margin-top:12px;width:100%;min-height:300px;font:15.5px/1.6 var(--sans);color:var(--testo);background:var(--bianco);border:1.5px solid var(--linea-campo);border-radius:14px;padding:16px 18px;resize:vertical}
#d-bozza:focus{outline:none;border-color:var(--petrolio);box-shadow:0 0 0 3px rgba(43,117,116,.25)}
#d-bozza[readonly]{background:var(--pagina);border-color:var(--linea)}
.pulsanti{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.conferma{margin-top:12px;background:var(--rosso-fondo);border-radius:12px;padding:14px 16px}
.conferma p{color:var(--testo);font-weight:600}
.nessuna{margin-top:12px;background:var(--sabbia);border-radius:14px;padding:18px 20px}
.inviata{margin-top:14px;background:var(--verde-fondo);color:var(--testo);border-radius:12px;padding:12px 16px;font-weight:600}

/* Avviso di invio con annullamento */
.avviso-invio{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:16px;background:#0A1F25;color:#E2E2E0;border:1px solid #2E5A5F;border-radius:14px;padding:10px 10px 10px 18px;box-shadow:0 20px 40px -16px rgba(0,0,0,.5);width:max-content;max-width:calc(100vw - 24px)}
.avviso-invio p{font-weight:600;font-size:15px}
.avviso-invio .btn{background:#E2E2E0;color:#0E2931;min-height:42px;padding:8px 18px;font-size:15px}
.avviso-invio .btn:hover{background:#fff;color:#0E2931}
.avviso-invio :focus-visible{outline-color:#E2E2E0}

/* Finestre */
.finestra{border:0;border-radius:22px;padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--bianco);color:var(--testo);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.finestra::backdrop{background:rgba(10,31,37,.6)}
.finestra form,.finestra-corpo{padding:clamp(18px,3vw,30px);display:flex;flex-direction:column;gap:14px}
.finestra-testa{display:flex;justify-content:space-between;align-items:center;gap:12px}
.finestra-testa h2{font-size:32px}
.chiudi{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--linea-campo);background:transparent;font-size:24px;cursor:pointer;color:var(--testo)}
.finestra-nota{font-size:14px;color:var(--testo-2)}
.finestra .campo input,.finestra .campo select,.finestra .campo textarea{background:var(--pagina);color:var(--testo)}
.spunti{display:flex;flex-wrap:wrap;gap:8px}
.spunti button{border:1.5px dashed var(--linea-campo);background:var(--pagina);border-radius:999px;min-height:38px;padding:4px 14px;font:500 14px var(--sans);cursor:pointer;color:var(--testo)}
.spunti button:hover{border-color:var(--testo)}
.elenco-tasti{margin:0;display:flex;flex-direction:column;gap:0}
.elenco-tasti div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea);align-items:center}
.elenco-tasti dd{margin:0;color:var(--testo-2)}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;border:1px solid var(--linea-campo);border-bottom-width:2px;border-radius:7px;font:700 13px var(--sans);background:var(--pagina);color:var(--testo)}

/* Schermi medi: filtri in riga */
@media (max-width:1100px){
  .app-corpo{grid-template-columns:minmax(280px,340px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .app-lato{grid-column:1 / -1;border-right:0;border-bottom:1px solid var(--linea);padding:10px 14px;display:flex;gap:12px;align-items:center;overflow-x:auto}
  .filtri{display:flex;gap:6px;align-items:center}
  .filtri .lato-tit,#filtri-persone{display:none}
  .filtri button{width:auto;white-space:nowrap;gap:8px}
  .regole{margin:0;border:0;padding:0;position:relative}
  .regole summary{white-space:nowrap;border:1.5px solid var(--linea-campo);border-radius:999px;padding:6px 14px;min-height:40px}
  .regole[open]{position:fixed;inset:auto 12px 12px auto;width:min(340px,calc(100vw - 24px));max-height:70dvh;overflow:auto;background:var(--bianco);border:1px solid var(--linea-campo);border-radius:16px;padding:8px;z-index:30;box-shadow:0 20px 50px -20px rgba(0,0,0,.4)}
}
/* Telefono: una colonna, l'approvazione resta a portata di pollice */
@media (max-width:760px){
  .app-corpo{grid-template-columns:1fr}
  .app-dettaglio{display:none;grid-column:1;grid-row:2;padding:16px 16px 0}
  .app-lista{grid-row:2}
  .app-corpo.dettaglio-aperto .app-lista{display:none}
  .app-corpo.dettaglio-aperto .app-dettaglio{display:block}
  .indietro{display:inline-flex;align-items:center}
  .azioni-bozza{position:sticky;bottom:0;background:var(--pagina);margin:14px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--linea)}
  .azioni-bozza .btn{flex:1 1 auto}
  .azioni-bozza #b-approva{flex-basis:100%}
  .risposta{padding-bottom:20px}
  .avviso-invio{bottom:12px;gap:10px}
}
.perche p{padding:0;max-width:none}