/* ══ COLLEGA UNA PERSONA (§315) — reference web/mockup_collega_persona.html v2. js: web/modulo_persona.js ══
   Il modulo disegna il CORPO di un pannello (.editor): la ‹ e la ✕ sono del pannello. Solo token (regola 5). */
#collegaCorpo{padding-top:calc(var(--sp-6) + var(--sp-3))}
#collegaCorpo h2{font-size:var(--fs-xl);font-weight:900;margin:0 0 var(--sp-1);line-height:1.2;padding:0}   /* il corpo parte già sotto la ‹ e la ✕: niente rientro di .editor.con-back h2 (come #passiCorpo) */
.cp-sot{font-size:var(--fs-sm);color:var(--testo-soft);margin:0 0 var(--sp-4)}
.cp-cerca{width:100%;min-height:var(--tocco);padding:var(--sp-3);border-radius:var(--r-sm);border:1px solid var(--bordo);background:var(--incavo);color:var(--testo);
  font-size:var(--fs-lg);outline:none;font-family:inherit;box-sizing:border-box;--dentro:max(var(--r-dentro-min), calc(var(--r-sm) - var(--sp-3)))}
.cp-cerca:focus{border-color:var(--info)}
select.cp-cerca{height:var(--tocco)}
.cp-et{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--testo-debole);margin:var(--sp-4) 0 var(--sp-2)}
.cp-sc{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:calc(var(--tocco) + var(--sp-2));padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2);
  border:1px solid var(--bordo);border-radius:var(--r-md);background:var(--pannello);color:var(--testo);text-align:left;cursor:pointer;font:inherit;box-sizing:border-box;--dentro:max(var(--r-dentro-min), calc(var(--r-md) - var(--sp-2)))}
.cp-sc .tx{flex:1;min-width:0}
.cp-sc b{display:block;font-size:var(--fs-corpo)}
.cp-sc small{display:block;font-size:var(--fs-sm);color:var(--testo-soft)}
.cp-sc.nuovo{color:var(--accento);border-color:color-mix(in srgb,var(--accento) 45%,var(--bordo))}
.cp-sc.fermo{cursor:default}
.cp-sc.passato{opacity:.65}
.cp-nonpiu{flex:none;min-height:34px;padding:0 var(--sp-3);border-radius:var(--r-md);border:1px solid var(--bordo);background:var(--pannello-2);color:var(--testo);
  font-size:var(--fs-sm);font-weight:700;cursor:pointer;font-family:inherit;--dentro:max(var(--r-dentro-min), calc(var(--r-md) - var(--sp-1)))}
.cp-campo label,.cp-campi label{display:block;font-size:var(--fs-sm);color:var(--testo-soft);margin:var(--sp-3) 0 var(--sp-1)}
.cp-campi{display:flex;gap:var(--sp-2)}
.cp-campi > div{flex:1}
.cp-msg{white-space:pre-wrap;background:var(--incavo);border:1px solid var(--bordo);border-radius:var(--r-md);padding:var(--sp-3);font-size:var(--fs-base);line-height:1.45;word-break:break-word;--dentro:max(var(--r-dentro-min), calc(var(--r-md) - var(--sp-3)))}
.cp-nota{font-size:var(--fs-sm);color:var(--testo-soft);margin:var(--sp-2) 0 0}
.cp-nota b{color:var(--testo)}
.cp-err{color:var(--pericolo);font-size:var(--fs-sm);margin-top:var(--sp-2)}
.cp-btns{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}
.cp-btns .btn{flex:1;justify-content:center;text-align:center}
.cp-btns .btn:disabled{opacity:.45;cursor:default}
.cp-esito{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border:1px solid var(--bordo);border-radius:var(--r-md);background:var(--pannello);--dentro:max(var(--r-dentro-min), calc(var(--r-md) - var(--sp-4)))}
.cp-spunta{width:26px;height:26px;color:var(--ok);flex:none;fill:none;stroke:currentColor;stroke-width:2}
.cp-esito b{display:block;font-size:var(--fs-lg)}
.cp-esito p{margin:4px 0 0;font-size:var(--fs-sm);color:var(--testo-soft)}
/* la conferma: chi riceve il link o la richiesta */
.cp-domanda{padding:var(--sp-4);border-radius:var(--r-lg);border:1.5px solid var(--accento);background:color-mix(in srgb,var(--accento) 11%,var(--pannello));--dentro:max(var(--r-dentro-min), calc(var(--r-lg) - var(--sp-4)))}
.cp-chi{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.cp-chi b{display:block;font-size:var(--fs-lg);font-weight:900;line-height:1.3}
.cp-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--accento);color:var(--accento);font-weight:900;flex:none}
.cp-domanda .cp-et{margin-top:0}
.cp-domanda ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-5);font-size:var(--fs-sm);color:var(--testo-soft);line-height:1.5}
/* i miei inviti */
.cp-inv{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--bordo);border-radius:var(--r-md);background:var(--pannello);margin-bottom:var(--sp-2);--dentro:max(var(--r-dentro-min), calc(var(--r-md) - var(--sp-3)))}
.cp-inv .tx{flex:1;min-width:0}
.cp-inv b{display:block;font-size:var(--fs-corpo)}
.cp-inv small{display:block;font-size:var(--fs-sm);color:var(--testo-soft)}
.cp-stato{font-size:var(--fs-xs);font-weight:800;border-radius:var(--r-pill);padding:0 var(--sp-2);line-height:1.7;white-space:nowrap;border:1px solid var(--bordo);color:var(--testo-soft)}
.cp-stato.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--bordo))}
.cp-stato.attesa{color:var(--avviso);border-color:color-mix(in srgb,var(--avviso) 45%,var(--bordo))}
.cp-azioni{display:flex;gap:var(--sp-3);margin-top:var(--sp-1)}
.cp-azioni button{border:0;background:none;padding:0;color:var(--testo-debole);font-size:var(--fs-xs);text-decoration:underline;cursor:pointer;font-family:inherit}

/* DA CONFERMARE (mockup_da_confermare v2): il puntino sul tondo della foto e la voce del menu. La riga e la short list usano le
   classi di «Quello che aspetta te» (.cm-chiama, .el-r, .cm-past in storia_cavallo.css) */
#areaAtleta .aa-me.dc-punto{position:relative;overflow:visible}
.av-wrap.dc-punto::after, .aa-me.dc-punto::after{content:"";position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:var(--avviso);border:2px solid var(--sfondo);pointer-events:none}
.dc-voce .dc-ic{width:28px;height:28px;padding:4px;border-radius:50%;border:1.5px solid var(--avviso);color:var(--avviso);flex:none}
.dc-num{min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--avviso);color:var(--su-accento);font-size:var(--fs-xs);font-weight:900;display:grid;place-items:center}