/* =====================================================================
   CRAL e uffici pubblici · i colori e i pezzi propri
   Si carica dopo assets/css/app.css e app/stile.css (copiati da «Chiamate scuole»): stessi componenti, colori
   diversi. Verde petrolio per l'accento, corallo per quello che chiede attenzione (richiami, conteggi, accordi).
   ===================================================================== */

:root{
--pav:#eef3f2;--sup:#ffffff;--sup2:#f8fbfa;--sup3:#eef4f3;--sup4:#e3ecea;
--testo:#14353a;--testo2:#43605f;--testo3:#536b6a;--testo4:#8fa2a1;
--filo:#e3ebea;--filo2:#d2dedc;--filo3:#bccbc9;
--acc:#0b6e6c;--acc-sup:#e1f2ef;--acc-sup2:#c6e6e1;--acc-testo:#075a58;--acc-forte:#08605e;--su-acc:#fff;
--cor:#e8604c;--cor-pieno:#d9513d;--cor-sup:#ffece8;--cor-testo:#b23a28;
--grigio-t:#566070;
--focus:color-mix(in srgb,var(--acc) 35%,transparent);
--riga-hover:color-mix(in oklab,var(--acc) 4%,var(--sup));
--ombra-galleggia:0 0 0 1px rgba(20,53,58,.08),0 10px 30px -12px rgba(20,53,58,.24),0 2px 6px -2px rgba(20,53,58,.08);
--s1:#0b6e6c;--s2:#e8604c;--s3:#d08a0e;--s4:#3a6fd0;--s5:#8a4fbf;
color-scheme:light;
}
:root[data-tema="scuro"]{
--pav:#081011;--sup:#0f1718;--sup2:#131d1e;--sup3:#192526;--sup4:#202e2f;
--testo:#eef6f5;--testo2:rgba(238,246,245,.76);--testo3:rgba(238,246,245,.6);--testo4:rgba(238,246,245,.42);
--filo:rgba(255,255,255,.08);--filo2:rgba(255,255,255,.13);--filo3:rgba(255,255,255,.2);
--acc:#3cc2b3;--acc-sup:#0f3533;--acc-sup2:#164c48;--acc-testo:#bdf2ea;--acc-forte:#62d4c7;--su-acc:#081011;
--cor:#ff8a76;--cor-pieno:#ff7a63;--cor-sup:#4a1d16;--cor-testo:#ffcfc6;
--petrolio:var(--acc);--petrolio-scuro:var(--acc-forte);--petrolio-chiaro:var(--acc-sup);
--s1:#3cc2b3;--s2:#ff8a76;
color-scheme:dark;
}

/* testi piccoli sempre leggibili (contrasto ≥ 4,5:1 nei due temi) */
#barra .versione{color:var(--testo3)}
#barra .versione:hover{color:var(--testo)}
.fatti li .fonte,.pr .fonti{color:var(--testo3)}

/* la carta nella barra: verde petrolio */
.carta-blu{background:linear-gradient(160deg,#168f87,#0a5c5b);box-shadow:0 10px 24px -14px rgba(10,92,91,.85)}
:root[data-tema="scuro"] .carta-blu{background:linear-gradient(160deg,#137d76,#0b4b4a)}
.tessera .pallino{background:var(--cor-pieno)}
.voce .n b{background:var(--cor-sup);color:var(--cor-testo)}
.voce .n b.calmo{background:var(--acc-sup);color:var(--acc-testo)}
#barra .cliente .logo{background:var(--acc)}
/* 0.3: il nome con le scuole di lingua va su due righe: due righe pari, non «lingua» da sola. */
#barra .cliente b{text-wrap:balance}
/* 0.3: «Scuole di lingua» nella barra va su due righe: centrate sotto l'icona, e la tessera cresce se serve. */
.tessera{height:auto;min-height:56px;padding:6px 2px}
.tessera span{text-align:center;line-height:1.15;text-wrap:balance}
:root[data-tema="scuro"] #barra .cliente .logo{background:#fff}
.b.pieno,.bottone--primario,.bottone--petrolio{color:#fff}
:root[data-tema="scuro"] .b.pieno,:root[data-tema="scuro"] .bottone--primario,:root[data-tema="scuro"] .bottone--petrolio{color:#081011}
:root[data-tema="scuro"] .b.pieno svg,:root[data-tema="scuro"] .bottone--primario svg{color:#081011}
.b.corallo{background:var(--cor-pieno);color:#fff;box-shadow:0 6px 14px -8px color-mix(in srgb,var(--cor) 80%,transparent)}
.b.corallo svg{color:#fff}
.b.corallo:hover{background:var(--cor-testo);color:#fff}
:root[data-tema="scuro"] .b.corallo,:root[data-tema="scuro"] .b.corallo svg{color:#1a0a07}
:root[data-tema="scuro"] .b.corallo:hover{background:var(--cor);color:#1a0a07}
.c-cor{background:var(--cor-sup);color:var(--cor-testo)}.g-cor{background-color:var(--cor-pieno)}
.accesso__claim-accento{color:var(--cor)}

/* campi dei moduli anche nelle pagine nuove (in «Chiamate scuole» solo nelle vecchie e nei dialoghi) */
/* l'intestazione con i pulsanti a destra: in riga (in .testa la colonna allungherebbe il titolo) */
.testa.testa-r{flex-direction:row;align-items:flex-end}
.testa.testa-r>div:first-child{flex:1 1 380px}
.m :is(.campo,.blocco,.dentro) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea),#peek input:not([type=checkbox]):not([type=radio]),#peek select:not(.chip),#peek textarea{
  font:400 var(--t13)/1.4 var(--font);color:var(--testo);background:var(--sup);border:0;border-radius:8px;box-shadow:var(--anello);padding:7px 10px;min-height:34px;width:100%;box-sizing:border-box}
.m textarea,#peek textarea{min-height:84px;resize:vertical}
.m :is(.campo,.blocco) :is(input,select,textarea):focus,#peek input:focus,#peek select:focus,#peek textarea:focus{outline:0;box-shadow:0 0 0 1px var(--acc),0 0 0 4px var(--acc-sup)}
.m .campo,#peek .campo{display:grid;gap:5px;margin-bottom:12px}
.m .campo>span,#peek .campo>span{font:600 var(--t12)/1.3 var(--font);color:var(--testo2)}
.m .campo small,#peek .campo small{color:var(--testo3);font-size:var(--t11)}
.m .cerca input{box-shadow:none;background:none;padding:0;min-height:0;border:0;outline:0}
.m select.chip{width:auto}
.attrezzi .chip input[type=date]{width:auto}
dialog textarea{min-height:120px}
dialog .campo-due{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){dialog .campo-due{grid-template-columns:1fr}}

/* ── le righe degli enti ── */
.rn .tess{font-size:10.5px}
.rn .stato-r{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.rn .contatti-r{display:inline-flex;gap:10px;align-items:center;font-size:var(--t12);color:var(--testo3)}
.rn .contatti-r span{display:inline-flex;gap:4px;align-items:center}
.rn .contatti-r .si{color:var(--acc-testo)}
.rn .contatti-r .no{opacity:.45}
.rn.occupata{opacity:.6}
.selezionabile .rn{grid-template-columns:22px 36px minmax(0,1fr) auto}
.selezionabile .rn input[type=checkbox]{width:18px;height:18px;accent-color:var(--acc);margin:0}
.paginazione{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0;font-size:var(--t12);color:var(--testo3)}

/* ── la barra con i filtri ── */
.filtri-c{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filtri-c .chip select{all:unset}
.con-senza{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 10px;border-radius:var(--r-pill);background:var(--sup);box-shadow:var(--anello);font-size:var(--t12);font-weight:600;color:var(--testo2)}
.con-senza button{height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:11px;font-weight:600;color:var(--testo3);background:var(--sup3)}
.con-senza button.viva{background:var(--acc);color:#fff}
.con-senza button.viva.no{background:var(--cor-pieno);color:#fff}
:root[data-tema="scuro"] .con-senza button.viva{color:#081011}

/* ── la scheda dell'ente ── */
.contatti-s{display:flex;flex-direction:column;background:var(--sup);border-radius:12px;box-shadow:var(--anello);padding:2px 12px}
.ct{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 2px;border-top:1px solid var(--filo)}
.ct:first-child{border-top:0}
.ct .tess{width:28px;height:28px;border-radius:8px}
.ct .val{font-size:var(--t14);font-weight:600;color:var(--testo);overflow-wrap:anywhere}
.ct .val a{color:inherit}
.ct .val a:hover{color:var(--acc-testo)}
.ct .fonte{font-size:var(--t11);color:var(--testo3);margin-top:1px;overflow-wrap:anywhere}
.ct .fonte a{color:var(--testo3);text-decoration:underline;text-underline-offset:2px}
.ct.errato .val{text-decoration:line-through;color:var(--testo3)}
.ct .az{display:flex;gap:4px}
.ct .az button,.pers .az button{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--testo3)}
.ct .az button svg,.pers .az button svg{width:14px;height:14px}
dialog fieldset{border:0;padding:0;margin:0;min-width:0}
.ct .az button:hover,.pers .az button:hover{background:var(--sup3);color:var(--testo)}
.pers{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 2px;border-top:1px solid var(--filo)}
.pers:first-child{border-top:0}
.pers .chi{font-size:var(--t14);font-weight:650;color:var(--testo)}
.pers .ruolo-p{font-size:var(--t11);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cor-testo)}
.pers.passata .chi{color:var(--testo3);text-decoration:line-through}
.vuoto-s{padding:14px 4px;color:var(--testo3);font-size:var(--t12)}
.sez-azioni{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.convenzioni-link{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--cor-sup);color:var(--cor-testo);font-size:var(--t13);font-weight:600}
.convenzioni-link a{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.accordo-s{display:flex;gap:6px;flex-wrap:wrap}
.accordo-s button{height:30px;padding:0 12px;border-radius:var(--r-pill);font-size:var(--t12);font-weight:600;background:var(--sup);box-shadow:var(--anello);color:var(--testo2)}
.accordo-s button.viva{background:var(--acc);color:#fff;box-shadow:none}
.accordo-s button.viva[data-tappa=persa]{background:var(--testo3)}
:root[data-tema="scuro"] .accordo-s button.viva{color:#081011}
.storia .esito-t{font-weight:700;color:var(--testo)}

/* ── la chiamata ── */
.chiama{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;padding:18px 24px 90px;align-items:start}
@media (max-width:1100px){.chiama{grid-template-columns:minmax(0,1fr)}}
.chiama .colonna{display:flex;flex-direction:column;gap:14px;min-width:0}
.chiama .testa-c{display:flex;align-items:flex-start;gap:14px}
.chiama .testa-c h1{font-size:var(--t24);line-height:1.15;letter-spacing:-.02em}
.chiama .testa-c .sub{color:var(--testo2);margin-top:4px}
.numeri-c{display:flex;flex-direction:column;gap:8px}
.numero-c{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--acc);color:#fff;text-decoration:none;box-shadow:0 10px 22px -14px color-mix(in srgb,var(--acc) 85%,transparent);transition:filter var(--d1)}
.numero-c:hover{filter:brightness(1.08);color:#fff;text-decoration:none}
.numero-c b{font-size:20px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.numero-c small{display:block;font-size:var(--t11);opacity:.9}
.numero-c.secondario{background:var(--sup);color:var(--testo);box-shadow:var(--anello)}
.numero-c.secondario b{font-size:16px}
.numero-c.secondario:hover{color:var(--testo);background:var(--sup2)}
:root[data-tema="scuro"] .numero-c:not(.secondario){color:#081011}
.script-c{background:var(--sup);border-radius:14px;box-shadow:var(--anello);padding:14px 16px;font-size:var(--t14);line-height:1.6;color:var(--testo);white-space:pre-wrap}
.script-c .consiglio{display:block;margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--acc-sup);color:var(--acc-testo);font-size:var(--t12);line-height:1.5;white-space:normal}
.obiezioni-c details{background:var(--sup);border-radius:12px;box-shadow:var(--anello);margin-bottom:6px}
.obiezioni-c summary{cursor:pointer;padding:10px 12px;font-weight:600;font-size:var(--t13);list-style:none;display:flex;gap:8px}
.obiezioni-c summary::-webkit-details-marker{display:none}
.obiezioni-c summary::before{content:"›";color:var(--testo3);transition:transform .2s var(--expo);display:inline-block}
.obiezioni-c details[open] summary::before{transform:rotate(90deg)}
.obiezioni-c details p{padding:0 14px 12px 26px;font-size:var(--t13);line-height:1.55;color:var(--testo2);white-space:pre-wrap}
.esiti-c{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.esiti-c button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border-radius:12px;background:var(--sup);box-shadow:var(--anello);text-align:left;font-weight:650;color:var(--testo)}
.esiti-c button small{font-weight:500;color:var(--testo3);font-size:var(--t11)}
.esiti-c button:hover{box-shadow:var(--anello-su);background:var(--sup2)}
.esiti-c button[data-esito=interessati]{background:var(--acc-sup);color:var(--acc-testo);box-shadow:none}
.esiti-c button[data-esito=da_richiamare]{background:var(--ambra-sup);color:var(--ambra-testo);box-shadow:none}
.esiti-c button[data-esito=non_interessati]{background:var(--cor-sup);color:var(--cor-testo);box-shadow:none}
.barra-chiama{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:8px;padding:10px 24px;background:var(--vetro);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:0 1px 0 var(--filo)}
.barra-chiama .spazio{flex:1}
.occupata-c{padding:10px 12px;border-radius:12px;background:var(--ambra-sup);color:var(--ambra-testo);font-size:var(--t13)}

/* ── panoramiche ── */
.barre-c{display:flex;flex-direction:column;gap:6px}
.barre-c .riga-b{display:grid;grid-template-columns:minmax(0,1fr) 120px 56px;gap:10px;align-items:center;font-size:var(--t12);cursor:pointer}
.barre-c .riga-b:hover .t{color:var(--acc-testo)}
.barre-c .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--testo);font-weight:550}
.barre-c .b2{height:8px;border-radius:4px;background:var(--sup3);overflow:hidden}
.barre-c .b2 i{display:block;height:100%;background:var(--acc);border-radius:4px}
.barre-c .n{text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--testo2)}
.completezza{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.completezza .cp{padding:10px 12px;border-radius:12px;background:var(--sup2);box-shadow:inset 0 0 0 1px var(--filo);cursor:pointer;text-align:left}
.completezza .cp:hover{box-shadow:inset 0 0 0 1px var(--filo3)}
.completezza .cp .k{font-size:var(--t11);font-weight:600;color:var(--testo3)}
.completezza .cp .v{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--testo)}
.completezza .cp .p{height:5px;border-radius:3px;background:var(--sup4);margin-top:6px;overflow:hidden}
.completezza .cp .p i{display:block;height:100%;background:var(--acc)}

/* ── raccolta: i flussi ── */
.flusso{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--filo)}
.flusso:first-child{border-top:0}
.flusso .stato-f{display:inline-flex;align-items:center;gap:6px;font-size:var(--t12);font-weight:600}
.flusso .stato-f i{width:8px;height:8px;border-radius:50%;background:var(--ok-pieno)}
.flusso.tace .stato-f{color:var(--no-testo)}
.flusso.tace .stato-f i{background:var(--no)}
.avviso-b.rosso{background:var(--no-sup);color:var(--no-testo)}
.chiave-n8n{font-family:var(--mono);font-size:12px;padding:10px 12px;border-radius:10px;background:var(--sup3);overflow-wrap:anywhere;user-select:all}

/* ── zone delle persone (smistamento, utenti) ── */
.zone-p{display:flex;flex-wrap:wrap;gap:4px}
.regioni-s{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px;max-height:280px;overflow:auto;padding:4px 2px}
.regioni-s label{display:flex;gap:6px;align-items:center;font-size:var(--t13)}
.regioni-s input,.scelta-c input{accent-color:var(--acc)}
.scelta-c{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--t13)}
.scelta-c label{display:flex;gap:6px;align-items:center}

/* ── email ── */
.email-r .stato-e{font-size:var(--t11);font-weight:600}
.anteprima-firma{border-radius:12px;box-shadow:var(--anello);padding:12px;background:#fff;color:#1f1f1f;overflow:auto}
.dest-e{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.dest-e label{display:flex;gap:8px;align-items:center;font-size:var(--t13)}
.dest-e small{color:var(--testo3)}

/* ── guida rapida della home ── */
.passi-h{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.passi-h .passo{padding:12px 14px;border-radius:12px;background:var(--sup2);box-shadow:inset 0 0 0 1px var(--filo);font-size:var(--t12);color:var(--testo2);line-height:1.5}
.passi-h .passo b{display:block;color:var(--testo);font-size:var(--t13);margin-bottom:2px}

@media (max-width:760px){
  .chiama{padding:12px 12px 80px}
  .barra-chiama{padding:8px 12px}
  .barre-c .riga-b{grid-template-columns:minmax(0,1fr) 70px 46px}
}

/* 0.3.4: «Da verificare»: riga e pulsanti in un blocco, con il filo sotto i pulsanti (prima il filo della riga passava sopra i pulsanti). */
.blocco-verifica{position:relative;padding-bottom:12px}
.blocco-verifica .rn::after{display:none}
.blocco-verifica::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--filo)}
.blocco-verifica>.azioni{margin:2px 0 0 58px}
.blocco-verifica .punteggio{margin:0 0 4px 58px;font-size:12.5px;line-height:1.45}
.blocco-verifica .punteggio b.p-vero{color:#0b6e6c}
.blocco-verifica .punteggio b.p-falso{color:#b3402f}
.blocco-verifica .punteggio b.p-incerto{color:#8a6d00}