/* ============================================
   clieAnagr.css — Sezione "Dati personali" (Collection Clie*)
   Classi prefissate ca-* per non collidere con le classi globali.
   Estetica: mockup-dati-anagrafici.html, mappata sulle variabili PWA (light-mode ok).
   ============================================ */

/* ---- Overview / anello completamento (landing) ---- */
.ca-overview {
    display: flex; align-items: center; gap: 14px;
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: 16px; margin-bottom: 16px;
}
.ca-ring {
    width: 52px; height: 52px; border-radius: 50%;
    background: conic-gradient(var(--color-accent-primary) 0 0, var(--color-bg-tertiary) 0 100%);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ca-ring span {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-bg-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 800;
}
/* ---- Doppio anello: Canonico vs Draft (solo quando differiscono) ---- */
.ca-rings { display: flex; gap: 16px; flex-shrink: 0; }
.ca-ring-w { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ca-rl { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.ca-rl-d { color: var(--color-warning); }
.ca-dett {
    margin-left: auto; flex-shrink: 0; white-space: nowrap;
    padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg-tertiary); color: var(--color-text-primary);
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.ca-dett:hover { border-color: var(--color-accent-primary); }
.ca-ot { font-size: 0.92rem; font-weight: 700; }
.ca-os { font-size: 0.74rem; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.4; }

/* ---- Riga categoria (landing) ---- */
.ca-cat {
    display: flex; align-items: center; gap: 14px;
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: 14px; padding: 14px; margin-bottom: 11px; cursor: pointer;
    text-decoration: none; color: inherit;
}
.ca-cat:hover { border-color: var(--color-accent-primary); }
.ca-ico {
    width: 44px; height: 44px; border-radius: 11px;
    background: rgba(162, 122, 186, 0.12); border: 1px solid rgba(162, 122, 186, 0.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent-primary); flex-shrink: 0;
}
.ca-cat .ca-meta { flex: 1; min-width: 0; }
.ca-nm { font-size: 0.95rem; font-weight: 700; }
.ca-sb { font-size: 0.74rem; color: var(--color-text-muted); margin-top: 2px; }
.ca-chev { color: var(--color-text-muted); flex-shrink: 0; }

/* ---- Badge stato validazione ---- */
.ca-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: var(--radius-full);
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.ca-badge--review { background: rgba(251, 191, 36, 0.12); color: var(--color-warning); border: 1px solid rgba(251, 191, 36, 0.3); }
.ca-badge--ok     { background: rgba(74, 222, 128, 0.12); color: var(--color-success); border: 1px solid rgba(74, 222, 128, 0.3); }
.ca-badge--todo   { background: rgba(162, 122, 186, 0.12); color: var(--color-accent-primary); border: 1px solid rgba(162, 122, 186, 0.35); }
.ca-badge--err    { background: rgba(239, 68, 68, 0.12); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.3); }
.ca-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Header dettaglio (back + titolo + badge) ---- */
.ca-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ca-back {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
}
.ca-detail-title { font-size: 1.15rem; font-weight: 700; flex: 1; letter-spacing: -0.01em; }

/* ---- Card ---- */
.ca-card {
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: 18px; margin-bottom: 13px; position: relative; overflow: hidden;
}
.ca-card.ca-acc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-accent-primary); opacity: 0.85; }
.ca-card.ca-acc.ca-r::before { background: var(--color-warning); }
.ca-card.ca-acc.ca-g::before { background: var(--color-success); }
.ca-kick {
    font-size: 0.68rem; font-weight: 600; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center;
}
.ca-kick__tags { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 6px; }

/* ---- Form ---- */
.ca-field { margin-bottom: 13px; }
.ca-field label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; }
.ca-inp {
    width: 100%; height: 46px; background: var(--color-input-bg); border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md); color: var(--color-text-primary); padding: 0 14px;
    font-family: inherit; font-size: 0.9rem;
}
.ca-inp:focus { border-color: var(--color-input-border-focus); box-shadow: var(--glow-purple); outline: none; }
.ca-inp.ca-sel { display: flex; align-items: center; justify-content: space-between; }
.ca-inp.ca-overlay { border-color: rgba(251, 191, 36, 0.55); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18) inset; }
.ca-inp.ca-saved   { transition: border-color 0.2s ease; border-color: rgba(74, 222, 128, 0.7); }
textarea.ca-inp { height: 74px; padding: 10px 14px; resize: none; }
.ca-two { display: flex; gap: 10px; }
.ca-two .ca-field { flex: 1; }

/* ---- Icona "i" + fumetto (caInfo, functions.php · caInfoTgl, clieAnagr.js) ---- */
.ca-info {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 20px; height: 20px; margin-left: 5px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--color-text-muted); cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.ca-info:hover, .ca-info.ca-on { color: var(--color-accent-primary); background: rgba(162, 122, 186, 0.12); }
/* Testo sorgente della "i": sempre nascosto, lo mostra il fumetto flottante #caInfoPop (appeso al body) */
.ca-info-pop { display: none; }
.ca-info-float {
    position: fixed; z-index: 9000; box-sizing: border-box; padding: 12px 14px; border-radius: 14px;
    background: var(--color-bg-secondary); border: 1px solid rgba(162, 122, 186, 0.45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(162, 122, 186, 0.08);
    color: var(--color-text-primary); font-size: 0.8rem; font-weight: 500; line-height: 1.5;
    animation: caInfoIn 0.15s ease;
}
.ca-info-float[hidden] { display: none; }
/* freccina verso l'icona (--ax = ascissa dell'icona rispetto al fumetto) */
.ca-info-float::before {
    content: ''; position: absolute; left: calc(var(--ax, 24px) - 6px); top: -7px; width: 12px; height: 12px;
    background: var(--color-bg-secondary); border-left: 1px solid rgba(162, 122, 186, 0.45); border-top: 1px solid rgba(162, 122, 186, 0.45);
    transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.ca-info-float.is-up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.ca-kick > span:has(> .ca-info) { flex: 1; display: flex; align-items: center; }
@keyframes caInfoIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---- Recapiti: card contatti principali ---- */
.ca-card.ca-card--main {
    border-color: rgba(162, 122, 186, 0.45);
    background: linear-gradient(180deg, rgba(162, 122, 186, 0.10), rgba(162, 122, 186, 0.03)), var(--color-bg-secondary);
}
.ca-card--main .ca-kick { color: var(--color-accent-primary); }

/* ---- Sedi: tipo come card selezionabili (.ca-rb) ---- */
.ca-sedetipo { display: flex; gap: 8px; }
.ca-sedetipo .ca-rb { padding: 13px 8px; font-size: 0.8rem; }
.ca-sedetipo:has(input.ca-overlay) .ca-rb { border-color: rgba(251, 191, 36, 0.55); }
.ca-hint { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 5px; }

/* ---- Upload + file ---- */
.ca-up {
    border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: 16px;
    text-align: center; color: var(--color-text-muted); font-size: 0.8rem; margin-bottom: 13px;
    background: rgba(255, 255, 255, 0.015); cursor: pointer;
}
.ca-up b { color: var(--color-accent-primary); font-weight: 700; }
.ca-up .ca-ic { margin-bottom: 7px; color: var(--color-accent-primary); }
.ca-fileitem {
    display: flex; align-items: center; gap: 10px;
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; font-size: 0.8rem;
}
.ca-fileitem .ca-fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-fileitem .ca-tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }

/* ---- List rows (recapiti) ---- */
.ca-lrow { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-top: 1px solid var(--color-divider); }
.ca-lrow:first-child { border-top: 0; }
.ca-lrow .ca-lb { flex: 1; min-width: 0; }
.ca-lrow .ca-lt { font-size: 0.88rem; font-weight: 600; }
.ca-lrow .ca-ls { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 1px; }
.ca-del { color: var(--color-text-muted); background: none; border: none; cursor: pointer; flex-shrink: 0; }

/* ---- Chips ---- */
.ca-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ca-chip {
    font-size: 0.66rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full);
    background: rgba(105, 180, 228, 0.12); color: var(--color-accent-secondary); border: 1px solid rgba(105, 180, 228, 0.3);
}
.ca-chip.ca-p { background: rgba(162, 122, 186, 0.12); color: var(--color-accent-primary); border-color: rgba(162, 122, 186, 0.3); }
.ca-chip.ca-mut { background: rgba(128, 128, 128, 0.12); color: var(--color-text-muted); border-color: var(--color-border); }

/* ---- Add + CTA ---- */
.ca-add {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 12px; background: transparent; border: 1px dashed var(--color-border); border-radius: 10px;
    color: var(--color-accent-primary); font-family: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; margin-top: 4px;
}
.ca-add:hover { border-color: var(--color-accent-primary); background: rgba(162, 122, 186, 0.05); }
.ca-add:disabled { opacity: 0.4; cursor: not-allowed; color: var(--color-text-muted); }
.ca-add:disabled:hover { border-color: var(--color-border); background: transparent; }
.ca-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 14px; background: var(--color-accent-primary); color: #fff; border: none; border-radius: 9px;
    font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; box-shadow: var(--glow-purple); margin-top: 6px;
}
.ca-cta--ghost { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border); box-shadow: none; }

/* ---- Sezioni interne alla scheda persona (Ruoli / Website / Dominio) ---- */
.ca-sec {
    background: rgba(255, 255, 255, 0.015); border: 1px solid var(--color-border); border-radius: 12px;
    padding: 13px 14px; margin-top: 11px;
}
.ca-sec.ca-on    { border-color: rgba(162, 122, 186, 0.4); background: rgba(162, 122, 186, 0.05); }
.ca-sec.ca-on.ca-b { border-color: rgba(105, 180, 228, 0.4); background: rgba(105, 180, 228, 0.05); }
.ca-sec.ca-on.ca-g { border-color: rgba(74, 222, 128, 0.32); background: rgba(74, 222, 128, 0.04); }
.ca-sec-hd { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ca-sec-hd .ca-sec-tt { flex: 1; font-size: 0.86rem; font-weight: 700; letter-spacing: -0.005em; color: var(--color-text-primary); }
.ca-sec-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-divider); }
.ca-sec.ca-on     .ca-sec-body { border-top-color: rgba(162, 122, 186, 0.2); }
.ca-sec.ca-on.ca-b .ca-sec-body { border-top-color: rgba(105, 180, 228, 0.2); }
.ca-sec.ca-on.ca-g .ca-sec-body { border-top-color: rgba(74, 222, 128, 0.18); }
.ca-sec .ca-field { margin-bottom: 11px; }
.ca-sec .ca-field:last-child { margin-bottom: 0; }

/* ---- Segmented buttons (ruoli referenti) ---- */
.ca-roles3 { display: flex; gap: 6px; margin-top: 11px; }
.ca-rb {
    flex: 1; text-align: center; padding: 10px 6px; border-radius: 10px;
    border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-secondary); font-family: inherit; font-size: 0.74rem; font-weight: 700;
    cursor: pointer; user-select: none; letter-spacing: -0.005em; line-height: 1.1;
    transition: all 0.15s;
}
.ca-rb:hover { border-color: var(--color-accent-primary); color: var(--color-text-primary); }
/* Indicatore di scelta multipla: casella con spunta personalizzata (Sedi: tipo · Persone: ruoli).
   label.ca-rb (stessa specificità di .ca-field label, definita dopo): in Sedi le card stanno dentro .ca-field,
   la cui regola label{display:block} le schiacciava; .ca-rb.ca-on / :hover restano più specifiche per il colore. */
label.ca-rb {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 0;
    font-size: 0.78rem; font-weight: 700; color: var(--color-text-secondary);
}
.ca-rb::before {
    content: ''; display: inline-block; flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px;
    border: 1.5px solid rgba(162, 122, 186, 0.5); background-color: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.ca-rb:hover::before { border-color: var(--color-accent-primary); background-color: rgba(162, 122, 186, 0.12); }
.ca-rb.ca-on::before {
    border-color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px,
                linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    box-shadow: 0 0 0 3px rgba(162, 122, 186, 0.18), 0 2px 8px rgba(162, 122, 186, 0.45);
    animation: caChk 0.22s ease;
}
@keyframes caChk { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (max-width: 480px) { .ca-roles3 .ca-rb { flex-direction: column; gap: 6px; padding: 10px 4px; } }   /* 3 ruoli affiancati: casella sopra il testo */
.ca-rb.ca-on {
    background: linear-gradient(180deg, rgba(162, 122, 186, 0.22), rgba(162, 122, 186, 0.12));
    color: #fff; border-color: rgba(162, 122, 186, 0.55);
    box-shadow: 0 0 0 1px rgba(162, 122, 186, 0.18) inset, 0 0 14px rgba(162, 122, 186, 0.18);
}

/* ---- Switch (gate apertura sezione + privacy toggle) ---- */
.ca-sw { width: 36px; height: 20px; background: var(--color-success); border-radius: var(--radius-full); position: relative; flex-shrink: 0; cursor: pointer; }
.ca-sw i { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.ca-sw.ca-off { background: var(--color-bg-tertiary); }
.ca-sw.ca-off i { right: auto; left: 2px; background: var(--color-text-muted); }

/* ---- Toggle row (privacy "Posso pubblicare nome e foto") ---- */
.ca-toggle-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: 10px; margin-bottom: 11px;
}
.ca-toggle-row .ca-tt { flex: 1; font-size: 0.78rem; font-weight: 600; }
.ca-toggle-row .ca-ts { font-size: 0.66rem; color: var(--color-text-muted); margin-top: 2px; font-weight: 400; }

/* ---- Link box (riga link/identita' web in sezione Website) ---- */
.ca-lbox { border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 11px; margin-bottom: 8px; background: var(--color-bg-primary); }
.ca-lbox-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.ca-lbox-head .ca-inp.ca-sel { height: 36px; font-size: 0.78rem; padding: 0 11px; }

/* ---- Maniglia di trascinamento (riordino persone, dndList in clieAnagr.js, Piano P18) ----
   Mobile-first: area di tocco 2.75rem, da desktop 2rem. touch-action:none = il dito trascina, non scorre la pagina.
   Lo stato della scheda trascinata lo danno gli stili inline di dndList; qui solo la maniglia. */
.ca-drag {
    --ca-drag-sz: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    min-width: var(--ca-drag-sz); min-height: var(--ca-drag-sz); margin: -0.5rem 0.25rem -0.5rem -0.5rem;
    border-radius: var(--radius-md); color: var(--color-text-muted);
    font-size: 1.05rem; line-height: 1; cursor: grab;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.ca-drag:active { cursor: grabbing; color: var(--color-accent-primary); background: rgba(162, 122, 186, 0.12); }
@media (hover: hover) { .ca-drag:hover { color: var(--color-accent-primary); background: rgba(162, 122, 186, 0.12); } }
@media (min-width: 768px) { .ca-drag { --ca-drag-sz: 2rem; margin: 0 0.25rem 0 0; } }

/* ---- Area file (ClieFileArea) — card file + card "Carica file"; stessi token/ricetta-pill della scheda ---- */
.cfa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 13px; }
@media (min-width: 768px) { .cfa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cfa-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    min-width: 0; min-height: 132px; padding: 12px; cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)), var(--color-bg-tertiary);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cfa-card:hover { border-color: var(--color-accent-primary); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.cfa-card.cfa-no { cursor: default; opacity: 0.8; }
.cfa-card.cfa-no:hover { transform: none; box-shadow: none; border-color: var(--color-border); }
.cfa-ico {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px; color: var(--color-accent-primary);
    background: rgba(162, 122, 186, 0.12); border: 1px solid rgba(162, 122, 186, 0.25);
}
.cfa-ico--doc   { color: var(--color-accent-secondary); background: rgba(105, 180, 228, 0.12); border-color: rgba(105, 180, 228, 0.28); }
.cfa-ico--video { color: var(--color-warning);          background: rgba(251, 191, 36, 0.10);  border-color: rgba(251, 191, 36, 0.28); }
.cfa-r1 { width: 100%; margin-top: 2px; font-weight: 700; font-size: 0.82rem; line-height: 1.2; color: var(--color-text-primary);
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfa-r2 { font-size: 0.68rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cfa-r3 { margin-top: auto; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
          padding: 3px 9px; border-radius: var(--radius-full); border: 1px solid transparent; }

/* 7 stati (Uso × filesystem): ricetta rgba(token,.12)/token/rgba(.3) come .ca-badge/.ca-chip */
.cfa-r3.st-valutazione { color: var(--color-warning);           background: rgba(251, 191, 36, 0.12);  border-color: rgba(251, 191, 36, 0.3); }
.cfa-r3.st-preso       { color: var(--color-accent-secondary);  background: rgba(105, 180, 228, 0.12); border-color: rgba(105, 180, 228, 0.3); }
.cfa-r3.st-respinto    { color: var(--color-error);             background: rgba(239, 68, 68, 0.12);   border-color: rgba(239, 68, 68, 0.3); }
.cfa-r3.st-cancellato  { color: var(--color-text-muted);        background: rgba(128, 128, 128, 0.14); border-color: var(--color-border); }
.cfa-r3.st-approvato   { color: var(--color-success);           background: rgba(74, 222, 128, 0.12);  border-color: rgba(74, 222, 128, 0.3); }
.cfa-r3.st-operativo   { color: #34d399;                        background: rgba(52, 211, 153, 0.12);  border-color: rgba(52, 211, 153, 0.3); }
.cfa-r3.st-problema    { color: var(--color-accent-primary);    background: rgba(162, 122, 186, 0.14); border-color: rgba(162, 122, 186, 0.35); }

.cfa-del { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: none; line-height: 1; font-size: 1rem;
           border-radius: var(--radius-full); background: rgba(239, 68, 68, 0.14); color: var(--color-error); cursor: pointer; }
.cfa-del:hover { background: var(--color-error); color: #fff; }

/* Barra "Carica file": a tutta larghezza sotto i file, tipo + pulsante sulla stessa riga */
.cfa-add { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0;
           padding: 8px; background: rgba(162, 122, 186, 0.04); border: 1.5px dashed rgba(162, 122, 186, 0.4); border-radius: var(--radius-lg);
           transition: border-color 0.15s ease, background 0.15s ease; }
.cfa-add:hover { border-color: var(--color-accent-primary); background: rgba(162, 122, 186, 0.08); }
.cfa-tipo { flex: 1; min-width: 0; height: 42px; font-family: inherit; font-size: 0.8rem; padding: 0 10px; font-weight: 600; cursor: pointer;
            background: var(--color-input-bg); color: var(--color-text-primary);
            border: 1px solid var(--color-input-border); border-radius: var(--radius-md); }
.cfa-tipo:focus { border-color: var(--color-input-border-focus); outline: none; }
.cfa-pick { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; height: 42px; padding: 0 16px; cursor: pointer;
            font-size: 0.82rem; font-weight: 700; color: #fff; background: var(--color-accent-primary); white-space: nowrap;
            border-radius: var(--radius-md); box-shadow: var(--glow-purple); transition: filter 0.15s ease; }
.cfa-pick:hover { filter: brightness(1.08); }
.cfa-pick input { display: none; }

/* ============================================
   Layout schede dati (2026-10-01) — card tematiche come Recapiti; griglie responsive.
   Mobile: una colonna (coppie brevi affiancate con .ca-two). Desktop (≥768px): 2-4 colonne.
   ============================================ */

/* Card di gruppo: titolo + campi correlati */
.ca-card { padding: 16px; }
.ca-card > .ca-field:last-child, .ca-card > .ca-two:last-child .ca-field { margin-bottom: 0; }

/* Griglie: .ca-grid = 2 colonne da desktop; .ca-grid--3 = 3 colonne; su mobile una colonna */
.ca-grid, .ca-addr { row-gap: 13px; margin-bottom: 13px; }
.ca-grid > .ca-field, .ca-addr > .ca-field { margin-bottom: 0; }
.ca-card > .ca-grid:last-child, .ca-card > .ca-addr:last-child { margin-bottom: 0; }
.ca-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; }
.ca-grid > .ca-field { min-width: 0; }
.ca-grid .ca-fw { grid-column: 1 / -1; }
.ca-two .ca-field { min-width: 0; }

/* Sedi: indirizzo — mobile Via | Civico+CAP | Città+Prov · desktop Via+Civico | CAP+Città+Prov */
.ca-addr { display: grid; column-gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
           grid-template-areas: "via via" "civ cap" "cit prv"; }
.ca-addr .ca-a-via { grid-area: via; } .ca-addr .ca-a-civ { grid-area: civ; } .ca-addr .ca-a-cap { grid-area: cap; }
.ca-addr .ca-a-cit { grid-area: cit; } .ca-addr .ca-a-prv { grid-area: prv; }
.ca-addr > .ca-field { min-width: 0; }

/* Branding: palette con etichetta visibile sotto ogni colore */
.ca-swl { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
          font-size: 0.66rem; font-weight: 600; color: var(--color-text-muted); }
.ca-swl .ca-swatch { width: 52px; height: 52px; border-radius: 12px; }
.ca-swrow { gap: 16px; }

/* Nota in fondo alla scheda */
form > .ca-hint { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; line-height: 1.45; }
form > .ca-hint::before { content: 'i'; flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; margin-top: 1px;
    border: 1.5px solid currentColor; font-size: 0.6rem; font-weight: 800; font-style: normal;
    display: inline-flex; align-items: center; justify-content: center; }

/* Pagine principali: elenco categorie */
.ca-cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.ca-cats .ca-cat { margin-bottom: 0; }

@media (min-width: 768px) {
    .ca-card { padding: 20px; }
    .ca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ca-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ca-addr { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "via via via civ" "cap cit cit prv"; }
    .ca-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ca-card > .cfa-grid:last-child { margin-bottom: 0; }
textarea.ca-inp[data-path="descr4ai"] { height: 120px; }

/* ============================================
   Variante minimal (.ca-flat sul form): sezioni senza riquadro, gerarchia data da titolo e spazio vuoto.
   In prova su Anagrafica (2026-10-01). Le card dei file restano gli unici elementi in rilievo.
   ============================================ */
.ca-flat > section.ca-card {
    background: none; border: 0; border-radius: 0; box-shadow: none;   /* overflow:hidden di .ca-card resta: con visible la pagina si allargava */
    padding: 0; margin: 0 0 30px;
}
.ca-flat > section.ca-card > .ca-kick {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; color: var(--color-text-secondary);
    margin-bottom: 12px;
}
.ca-flat .cfa-add { background: transparent; border: 1px dashed var(--color-border); padding: 6px; }
.ca-flat .cfa-add:hover { border-color: var(--color-accent-primary); background: transparent; }
.ca-flat > .ca-hint { margin-top: 0; }
@media (min-width: 768px) { .ca-flat > section.ca-card { margin-bottom: 36px; } }

/* Variante minimal — campi: riempimento appena più chiaro dello sfondo, bordo quasi invisibile,
   marcato solo in focus; testo un filo più piccolo nella stessa altezza (46px = target touch). */
.ca-flat { --fi-bg: rgba(255, 255, 255, 0.05); --fi-bd: rgba(255, 255, 255, 0.07); --fi-bd-h: rgba(255, 255, 255, 0.16); }
html.light-mode .ca-flat { --fi-bg: #ffffff; --fi-bd: rgba(0, 0, 0, 0.07); --fi-bd-h: rgba(0, 0, 0, 0.16); }
.ca-flat .ca-inp, .ca-flat .cfa-tipo {
    background-color: var(--fi-bg); border-color: var(--fi-bd);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.ca-flat .ca-inp { font-size: 0.86rem; font-weight: 500; }
.ca-flat .ca-inp:hover, .ca-flat .cfa-tipo:hover { border-color: var(--fi-bd-h); }
.ca-flat .ca-inp:focus, .ca-flat .cfa-tipo:focus {
    background-color: var(--color-input-bg-focus); border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px rgba(162, 122, 186, 0.18);
}
/* stati di salvataggio: restano visibili sopra il bordo tenue */
.ca-flat .ca-inp.ca-overlay { border-color: rgba(251, 191, 36, 0.55); }
.ca-flat .ca-inp.ca-saved   { border-color: rgba(74, 222, 128, 0.7); }

/* Riga con campo lungo + campo corto (PEC 2/3 · SDI 1/3) */
.ca-two--wide > .ca-field:first-child { flex: 2; }

/* Variante minimal — gerarchia e ritmo:
   titolo di sezione più marcato + linea sottile che delimita la sezione senza riquadro;
   più aria fra le righe di campi (l'etichetta si lega al suo campo, non a quello sopra);
   area "Carica file" senza riquadro tratteggiato, allineata ai campi (46px). */
.ca-flat > section.ca-card > .ca-kick {
    justify-content: flex-start; gap: 12px; margin-bottom: 14px;
    color: var(--color-text-primary); opacity: 0.85;
}
.ca-flat > section.ca-card > .ca-kick::after { content: ''; flex: 1; height: 1px; background: var(--color-border); opacity: 0.7; }
.ca-flat .ca-field { margin-bottom: 18px; }
.ca-flat > section.ca-card > .ca-field:last-child, .ca-flat > section.ca-card > .ca-two:last-child .ca-field { margin-bottom: 0; }
.ca-flat .cfa-add, .ca-flat .cfa-add:hover { border: 0; padding: 0; background: none; }
.ca-flat .cfa-tipo, .ca-flat .cfa-pick { height: 46px; }
.ca-flat .cfa-tipo { font-size: 0.86rem; font-weight: 500; }

/* Variante minimal — più spazio negativo (scala verticale: etichetta→campo 8 · righe 24 · titolo→campi 20 · sezioni 48/60) */
.ca-detail-head:has(+ form.ca-flat) { margin-bottom: 28px; }
.ca-flat > section.ca-card { margin-bottom: 48px; }
.ca-flat > section.ca-card > .ca-kick { margin-bottom: 20px; }
.ca-flat .ca-field { margin-bottom: 24px; }
.ca-flat .ca-field > label { margin-bottom: 8px; }
.ca-flat > .ca-hint { padding-top: 4px; }
@media (min-width: 768px) {
    .ca-detail-head:has(+ form.ca-flat) { margin-bottom: 36px; }
    .ca-flat > section.ca-card { margin-bottom: 60px; }
}

/* Variante minimal — accento di brand (gradiente viola→azzurro, come la spunta delle card selezionabili):
   indicatore a rombo prima del titolo · linea divisoria sfumata · pulsante "Carica file". */
.ca-flat > section.ca-card > .ca-kick { opacity: 1; gap: 10px; }
.ca-flat > section.ca-card > .ca-kick::before {
    content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg);
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    /* ruotato sporge ~1.5px per lato: margine 4px e anello senza sfocatura, così resta dentro la sezione (overflow:hidden) */
    margin-left: 4px; box-shadow: 0 0 0 1.5px rgba(162, 122, 186, 0.28);
}
.ca-flat > section.ca-card > .ca-kick::after {
    height: 1px; opacity: 1;
    background: linear-gradient(90deg, rgba(162, 122, 186, 0.7), rgba(105, 180, 228, 0.35) 45%, transparent);
}
.ca-flat .cfa-pick {
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    box-shadow: 0 4px 14px rgba(162, 122, 186, 0.35);
}

/* Variante minimal — arrotondamenti: campi 14px · card file 18px ·
   azioni a pillola come il badge di stato (Carica file, pulsante Indietro) */
.ca-flat .ca-inp, .ca-flat .cfa-tipo { border-radius: 14px; }
.ca-flat .cfa-pick { border-radius: var(--radius-full); padding: 0 20px; }
.ca-flat .cfa-card { border-radius: 18px; }
.ca-detail-head:has(+ form.ca-flat) .ca-back { border-radius: var(--radius-full); }

/* Variante minimal — campi "incassati": a riposo quasi neri con ombra interna; solo il campo attivo
   si illumina (tinta viola, bordo, anello + alone) e accende la sua etichetta. Sovrascrive i --fi-* sopra. */
.ca-flat {
    --fi-bg: #0f0f11; --fi-bd: rgba(255, 255, 255, 0.06); --fi-bd-h: rgba(255, 255, 255, 0.13);
    --fi-sh: inset 0 1px 3px rgba(0, 0, 0, 0.55);
    --fi-bg-f: #15121a;
}
html.light-mode .ca-flat {
    --fi-bg: #f4f4f7; --fi-bd: rgba(0, 0, 0, 0.06); --fi-bd-h: rgba(0, 0, 0, 0.14);
    --fi-sh: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    --fi-bg-f: #ffffff;
}
.ca-flat .ca-inp, .ca-flat .cfa-tipo { box-shadow: var(--fi-sh); }
.ca-flat .ca-inp:focus, .ca-flat .cfa-tipo:focus {
    background-color: var(--fi-bg-f); border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px rgba(162, 122, 186, 0.16), 0 0 22px rgba(162, 122, 186, 0.14);
}
.ca-flat .ca-field:has(> .ca-inp:focus) > label { color: var(--color-accent-primary); transition: color 0.15s ease; }   /* non con la "i" in focus */

/* Variante minimal — Indietro: solo la freccia (colore brand), senza riquadro; area di tocco 36px invariata,
   spostata a sinistra perché la freccia si allinei al bordo del contenuto. */
.ca-detail-head:has(+ form.ca-flat) { gap: 4px; }
.ca-detail-head:has(+ form.ca-flat) .ca-back {
    border: 0; background: none; margin-left: -8px; color: var(--color-accent-primary);
    transition: transform 0.15s ease, color 0.15s ease;
}
.ca-detail-head:has(+ form.ca-flat) .ca-back svg path { stroke-width: 2.4; }   /* sul path: l'attributo stroke-width è lì */
.ca-detail-head:has(+ form.ca-flat) .ca-back:hover { transform: translateX(-2px); color: var(--color-accent-secondary); }

/* ============================================
   Variante minimal estesa a tutte le schede dati (2026-10-01)
   Le card-riga ripetute (sede, persona, profilo, recapito extra, materiale) restano gli unici riquadri:
   separano un elemento dall'altro. Dentro di esse niente altri riquadri: sottosezioni con linea in alto.
   ============================================ */
.ca-flat { --rc-bg: rgba(255, 255, 255, 0.045); --rc-bd: rgba(255, 255, 255, 0.07); }   /* più chiaro dei campi (#0f0f11): restano incassati */
html.light-mode .ca-flat { --rc-bg: #ffffff; --rc-bd: rgba(0, 0, 0, 0.06); }

/* card-riga: arrotondata, sfondo appena percettibile, filo di gradiente brand in cima */
.ca-flat .ca-card.ca-acc { background: var(--rc-bg); border: 1px solid var(--rc-bd); border-radius: 18px; padding: 18px; margin-bottom: 14px; }
.ca-flat .ca-card.ca-acc::before {
    height: 2px; opacity: 1;
    background: linear-gradient(90deg, var(--color-accent-primary), rgba(105, 180, 228, 0.5) 45%, transparent);
}
.ca-flat .ca-card.ca-acc > .ca-kick { margin-bottom: 16px; }
@media (min-width: 768px) { .ca-flat .ca-card.ca-acc { padding: 22px; } }

/* Persone (Cmd-Anagr-persone.php): card apribile con la riga del nome (button.ca-ptog, caPersTog). Chiusa: solo Nome e Cognome;
   aperta: tutti i campi e in fondo «Elimina persona» al centro. Apertura animata come le card di Dati Web (.caw-body):
   griglia 0fr ↔ 1fr, visibility hidden solo a fine chiusura (fuori dal giro del Tab). */
.ca-flat .ca-card[data-pers-id] > .ca-two .ca-field { margin-bottom: 0; }   /* lo spazio sotto lo dà .ca-pinner, dentro l'altezza animata */
.ca-ptog {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem;
    min-height: 2.75rem; margin: -0.5rem 0; padding: 0; background: none; border: 0;
    color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ca-ptog:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; border-radius: 8px; }
.ca-ptog__chev { flex-shrink: 0; color: var(--color-text-muted); transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), color 0.2s ease; }
.ca-pers-open .ca-ptog__chev { transform: rotate(180deg); color: var(--color-accent-primary); }
@media (min-width: 768px) { .ca-ptog { min-height: 2rem; margin: 0; } }
.ca-pbody {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows 0.35s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.35s;
}
.ca-pers-open > .ca-pbody {
    grid-template-rows: 1fr; visibility: inherit;
    transition: grid-template-rows 0.35s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}
/* padding laterale con margine negativo: spazio per l'anello di focus dei campi (overflow:hidden) */
.ca-pinner {
    overflow: hidden; min-height: 0; padding: 24px 3px 0; margin: 0 -3px;
    opacity: 0; transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.ca-pers-open > .ca-pbody > .ca-pinner { opacity: 1; }
/* «Elimina persona» in fondo alla card aperta: testuale, rosso, al centro (come .caw-del) */
.ca-pfoot { display: flex; justify-content: center; padding-top: 1rem; }
.ca-pdel {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.5rem 0.875rem; cursor: pointer;
    border: 1px solid transparent; border-radius: var(--radius-full); background: none;
    font-family: inherit; font-size: 0.8rem; font-weight: 700; color: var(--color-error);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ca-pdel:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
.ca-pdel:focus-visible { outline: 2px solid var(--color-error); outline-offset: 2px; }
/* Riapertura dopo un ricaricamento (caPersBack): niente animazione finché le card non sono aperte */
.ca-pnow .ca-pbody, .ca-pnow .ca-pinner, .ca-pnow .ca-ptog__chev { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .ca-ptog__chev, .ca-pbody, .ca-pers-open > .ca-pbody, .ca-pinner, .ca-pdel { transition: none; }
}

/* "+ Aggiungi …": tratteggio leggero, arrotondato come i campi */
.ca-flat .ca-add { border-radius: 14px; border: 1px dashed rgba(162, 122, 186, 0.4); padding: 13px; margin-top: 6px; }
.ca-flat .ca-add:hover:not(:disabled) { border-color: var(--color-accent-primary); background: rgba(162, 122, 186, 0.06); }

/* Persone: sottosezioni (Ruoli / Website / Dominio) senza riquadro, separate da una linea;
   lo stato acceso resta visibile come linea colorata (viola / verde / azzurro) */
.ca-flat .ca-sec, .ca-flat .ca-sec.ca-on {
    background: none; border: 0; border-top: 1px solid var(--color-border); border-radius: 0;
    padding: 16px 0 0; margin-top: 18px;
}
.ca-flat .ca-sec.ca-on      { border-top-color: rgba(162, 122, 186, 0.6); }
.ca-flat .ca-sec.ca-on.ca-g { border-top-color: rgba(74, 222, 128, 0.55); }
.ca-flat .ca-sec.ca-on.ca-b { border-top-color: rgba(105, 180, 228, 0.6); }
.ca-flat .ca-sec-body { border-top: 0; padding-top: 4px; }
.ca-flat .ca-lbox { background: none; border: 0; border-left: 2px solid rgba(162, 122, 186, 0.35); border-radius: 0; padding: 4px 0 4px 12px; margin-bottom: 14px; }
.ca-flat .ca-toggle-row { background: none; border: 0; border-radius: 0; padding: 10px 0; }

/* Card selezionabili e campi colore: arrotondati come i campi */
.ca-flat .ca-rb { border-radius: 14px; }
.ca-flat .ca-swl .ca-swatch { border-radius: 14px; }

/* Pagine principali (Dati personali / Info e risorse): stessi raggi e accento brand */
.ca-overview { border-radius: 20px; }
.ca-cat { border-radius: 18px; transition: border-color 0.15s ease, transform 0.15s ease; }
.ca-cat:hover { transform: translateY(-1px); }
.ca-ico { border-radius: 14px; background: linear-gradient(135deg, rgba(162, 122, 186, 0.18), rgba(105, 180, 228, 0.10)); }
.ca-dett { border-radius: var(--radius-full); padding: 6px 14px; }

/* Social: badge della piattaforma rilevata (riga titolo della card, accanto al cestino; la select è nascosta).
   Pallino col colore della piattaforma da data-code (codici ClieTab 'social'). */
.ca-socchip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--radius-full);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); white-space: nowrap;
}
html.light-mode .ca-socchip { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); }
.ca-socchip[hidden] { display: none; }
.ca-socchip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-text-muted); }
.ca-socchip[data-code="facebook"]::before  { background: #1877F2; }
.ca-socchip[data-code="instagram"]::before { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }
.ca-socchip[data-code="linkedin"]::before  { background: #0A66C2; }
.ca-socchip[data-code="youtube"]::before   { background: #FF0000; }
.ca-socchip[data-code="tiktok"]::before    { background: linear-gradient(45deg, #25F4EE, #FE2C55); }
.ca-socchip[data-code="x"]::before         { background: var(--color-text-primary); }
.ca-socchip[data-code="pinterest"]::before { background: #E60023; }
.ca-socchip[data-code="whatsapp_business"]::before { background: #25D366; }
.ca-socchip[data-code="google_business"]::before   { background: #4285F4; }

/* Titolo delle pagine di dettaglio: icona della categoria (CAICO, la stessa della pagina principale),
   nello stesso riquadro sfumato di .ca-ico in formato ridotto */
.ca-detail-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ca-dt-ico {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent-primary);
    background: linear-gradient(135deg, rgba(162, 122, 186, 0.18), rgba(105, 180, 228, 0.10));
    border: 1px solid rgba(162, 122, 186, 0.25);
}
.ca-detail-title .ca-funnel { margin-left: 0; }

/* Etichette di stato: mai a capo al loro interno ("Da validare" non si spezza su iPhone);
   nella riga titolo delle card (Materiali) se manca spazio va a capo l'intera etichetta, allineata a destra */
.ca-badge { white-space: nowrap; flex-shrink: 0; }
.ca-kick__tags { flex-wrap: wrap; justify-content: flex-end; row-gap: 5px; min-width: 0; }

/* Imbuto nel titolo (Dati Web "Servizio", Materiali "Gruppo"): nascosto su decisione del supervisore (2026-10-01).
   Mostrava solo un'informazione fissa; pulsante e barra .ca-svc restano nel markup (barra chiusa, is-coll). */
.ca-detail-title .ca-funnel { display: none; }

/* ============================================
   Pagine principali (Dati personali / Info e risorse) allineate alle schede interne (2026-10-01)
   ============================================ */
:root { --lp-card: rgba(255, 255, 255, 0.045); --lp-bd: rgba(255, 255, 255, 0.07); }
html.light-mode { --lp-card: #ffffff; --lp-bd: rgba(0, 0, 0, 0.06); }

/* Anello di completamento: 64px, tratto 6px, gradiente brand lungo l'avanzamento, centro trasparente.
   La percentuale arriva come --p (style in linea; caUpdateRing la aggiorna). --d = modifiche in revisione. */
.ca-ring {
    --p: 0; position: relative; width: 64px; height: 64px; border-radius: 50%; background: none;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ca-ring::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--color-accent-primary) 0%, var(--color-accent-secondary) calc(var(--p) * 1%),
                               var(--lp-bd) calc(var(--p) * 1%) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
    filter: drop-shadow(0 0 6px rgba(162, 122, 186, 0.35));
}
.ca-ring--d::before {
    background: conic-gradient(var(--color-warning) calc(var(--p) * 1%), var(--lp-bd) calc(var(--p) * 1%) 100%);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.3));
}
.ca-ring span {
    position: relative; width: auto; height: auto; background: none; border-radius: 0;
    font-size: 0.86rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text-primary);
}
.ca-rl { margin-top: 2px; }

/* Scheda riepilogo: tinta brand sfumata, come un'intestazione */
.ca-overview {
    gap: 16px; padding: 18px; margin-bottom: 18px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(162, 122, 186, 0.12), rgba(105, 180, 228, 0.05)), var(--lp-card);
    border: 1px solid rgba(162, 122, 186, 0.22);
}
.ca-ot { font-size: 1rem; }
.ca-dett {
    border-radius: var(--radius-full); padding: 8px 16px; background: transparent;
    border: 1px solid rgba(162, 122, 186, 0.45); color: var(--color-text-primary);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ca-dett:hover { background: rgba(162, 122, 186, 0.12); border-color: var(--color-accent-primary); }

/* Scheda riepilogo su telefono (≤480px, come .ca-roles3): in riga il bottone «Dettagli» usciva a destra.
   Griglia a due colonne: anelli (.ca-rings, o l'anello singolo #ca-ring-can) a sinistra su due righe, centrati;
   a destra il testo in alto e «Dettagli» sotto, a sinistra. Figli per posizione: anelli · testo · bottone. */
@media (max-width: 480px) {
    .ca-overview { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center; }
    .ca-overview > :first-child { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
    .ca-overview > div:nth-child(2) { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; }
    .ca-overview .ca-ot { overflow-wrap: normal; word-break: normal; hyphens: manual; }   /* «Completamento» mai spezzata */
    .ca-overview .ca-os { overflow-wrap: anywhere; }
    .ca-overview > .ca-dett { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin-left: 0; }
}
/* Schermi molto stretti (≤370px) con due anelli: anelli 56px, più vicini, percentuale e titolo appena più piccoli.
   Conto a 320px (html 18px, .frame-corpo 9px per lato, scheda 14px + bordo 1px per lato): 320 − 18 − 30 = 272;
   colonna anelli 67 («CANONICO») + 10 + 56 = 133, gap 12 → testo 127px; «Completamento» bold a 0.86rem ≈ 145 × 0.86 ≈ 125px.
   Margine di soli ~2px: «CANONICO»/«DRAFT» con spaziatura 0.02em (−0.03em × 10.8px × 8 ≈ −2.6px) portano il testo a ~129px.
   Senza :has(): il titolo si prende con il fratello che segue .ca-rings (~). */
@media (max-width: 370px) {
    .ca-overview { padding: 14px; column-gap: 12px; }
    .ca-overview .ca-rings { gap: 10px; }
    .ca-overview .ca-rings .ca-ring { width: 56px; height: 56px; }
    .ca-overview .ca-rings .ca-ring span { font-size: 0.78rem; }
    .ca-overview .ca-rings .ca-rl { letter-spacing: 0.02em; }
    .ca-overview > .ca-rings ~ div .ca-ot { font-size: 0.86rem; }
}

/* Righe categoria: come le card-riga delle schede interne */
.ca-cats { gap: 12px; }
.ca-cat { background: var(--lp-card); border: 1px solid var(--lp-bd); padding: 16px; gap: 14px; }
.ca-cat:hover { border-color: rgba(162, 122, 186, 0.5); }
.ca-cat .ca-chev { transition: transform 0.15s ease, color 0.15s ease; }
.ca-cat:hover .ca-chev { transform: translateX(2px); color: var(--color-accent-primary); }
.ca-ico { width: 46px; height: 46px; border: 1px solid rgba(162, 122, 186, 0.25); }

/* Dati Web (Ris-progetto) — righe di domini, provider, accessi (card-riga .ca-acc, apribili: blocco .caw in fondo al file).
   Stato del dominio in sola lettura nella riga di sintesi (.ca-chip.ca-mut.caw-st); codice fiscale dell'intestatario
   nascosto con l'attributo hidden finché l'intestatario non è una persona (caWebInt). */
.ca-flat .ca-card.ca-acc .ca-kick__tags .ca-chip { text-transform: none; letter-spacing: 0; }
.ca-websub { margin-top: 0.8rem; }
.ca-field.ca-webcf[hidden] { display: none; }

/* Segnaposto dei campi: tenui, per non sembrare testo già scritto */
.ca-flat .ca-inp::placeholder { color: var(--color-text-muted); opacity: 0.45; font-weight: 400; }

/* ============================================
   Finestra "Dettagli" — completamento e carenze (caCarenzeModal, clieAnagr.js)
   Mobile: pannello dal basso con maniglia · Desktop (≥600px): centrata. Sfondo sfocato, entrata animata.
   ============================================ */
.ca-mdl {
    position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(5, 5, 8, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity 0.22s ease;
}
.ca-mdl.is-open { opacity: 1; }
.ca-mdl-box {
    position: relative; width: 100%; max-height: 86vh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(162, 122, 186, 0.10), rgba(162, 122, 186, 0) 140px), var(--color-bg-secondary);
    border: 1px solid rgba(162, 122, 186, 0.28); border-bottom: 0; border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.45);
    padding: 10px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.ca-mdl.is-open .ca-mdl-box { transform: none; }
.ca-mdl-grip { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--color-border); }
.ca-mdl-x {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(255, 255, 255, 0.06); color: var(--color-text-secondary); transition: background 0.15s ease, color 0.15s ease;
}
.ca-mdl-x:hover { background: rgba(162, 122, 186, 0.18); color: var(--color-text-primary); }
html.light-mode .ca-mdl-x { background: rgba(0, 0, 0, 0.05); }

.ca-mdl-head { display: flex; align-items: center; gap: 16px; padding: 6px 44px 18px 0; border-bottom: 1px solid var(--color-border); }
.ca-mdl-ht { min-width: 0; }
.ca-mdl-t { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-text-primary); }
.ca-mdl-st { margin-top: 4px; font-size: 0.78rem; font-weight: 600; color: var(--color-warning); }
.ca-mdl-st.is-ok { color: var(--color-success); }

.ca-mdl-body { overflow-y: auto; padding: 16px 0 4px; -webkit-overflow-scrolling: touch; }
.ca-mdl-grp { padding: 14px 16px; margin-bottom: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); }
html.light-mode .ca-mdl-grp { background: rgba(0, 0, 0, 0.025); border-color: rgba(0, 0, 0, 0.06); }
.ca-mdl-gh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
             font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); }
.ca-mdl-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.7rem; letter-spacing: 0; color: var(--color-warning); background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.3); }
.ca-mdl-ul { list-style: none; margin: 0; padding: 0; }
.ca-mdl-ul li { position: relative; padding: 7px 0 7px 26px; font-size: 0.86rem; line-height: 1.4; color: var(--color-text-primary); }
.ca-mdl-ul li + li { border-top: 1px solid rgba(255, 255, 255, 0.05); }
html.light-mode .ca-mdl-ul li + li { border-top-color: rgba(0, 0, 0, 0.05); }
/* icona di avviso: cerchio ambra con "!" */
.ca-mdl-ul li::before {
    content: '!'; position: absolute; left: 0; top: 8px; width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 800;
    color: var(--color-warning); background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.4);
}

.ca-mdl-ok { display: flex; justify-content: center; padding: 18px 0 10px; }
.ca-mdl-okico {
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, var(--color-success), #34d399); box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.12), 0 8px 24px rgba(74, 222, 128, 0.3);
    animation: caChk 0.35s ease;
}

.ca-mdl-foot { padding-top: 12px; }
.ca-mdl-btn {
    width: 100%; height: 48px; border: 0; border-radius: var(--radius-full); cursor: pointer;
    font-family: inherit; font-size: 0.9rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    box-shadow: 0 6px 18px rgba(162, 122, 186, 0.35); transition: filter 0.15s ease, transform 0.15s ease;
}
.ca-mdl-btn:hover { filter: brightness(1.08); }
.ca-mdl-btn:active { transform: scale(0.98); }

@media (min-width: 600px) {
    .ca-mdl { align-items: center; padding: 24px; }
    .ca-mdl-box {
        max-width: 460px; max-height: 80vh; border-bottom: 1px solid rgba(162, 122, 186, 0.28); border-radius: 24px;
        padding: 22px 24px 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
        transform: translateY(10px) scale(0.97); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .ca-mdl-grip { display: none; }
    .ca-mdl-x { top: 18px; right: 18px; }
    .ca-mdl-foot { display: flex; justify-content: flex-end; }
    .ca-mdl-btn { width: auto; height: 42px; padding: 0 28px; }
}

/* ============================================
   Dati Web (Cmd-Ris-progetto.php, form.ca-flat.caw) — sezioni riconoscibili e card apribili.
   Tutte le regole stanno sotto .caw: le altre schede Dati non cambiano.
   Sezione: --cw / --cw-rgb = colore (viola Domini, azzurro Provider, ambra Accessi, verde Il tuo sito) sul quadratino
   dell'icona, sul «+» e sul filo verticale delle card (come le schede della vista Progetti, pagamenti.css).
   Card: riga di sintesi button.caw-sum (caWebTog) + corpo .caw-body > .caw-inner, griglia 0fr ↔ 1fr;
   visibility hidden solo a fine chiusura (contenuto chiuso fuori dal giro del Tab).
   ============================================ */
.caw {
    --cw-dur: 0.35s; --cw-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --cw: var(--color-accent-primary); --cw-rgb: 162, 122, 186;
}
.caw .caw-sec--prv  { --cw: var(--color-accent-secondary); --cw-rgb: 105, 180, 228; }
.caw .caw-sec--acc  { --cw: var(--color-warning);          --cw-rgb: 251, 191, 36; }
.caw .caw-sec--sito { --cw: var(--color-success);          --cw-rgb: 74, 222, 128; }
html.light-mode .caw .caw-sec--acc  { --cw-rgb: 180, 83, 9; }
html.light-mode .caw .caw-sec--sito { --cw-rgb: 22, 163, 74; }

/* Sezioni: spazio fra l'una e l'altra più contenuto (le card chiuse accorciano già la pagina) */
.caw > section.ca-card { margin-bottom: 2.5rem; }
@media (min-width: 768px) { .caw > section.ca-card { margin-bottom: 3rem; } }

/* Testata: [icona] Titolo · n ……… [+]. Il padding lascia spazio all'anello di focus (la sezione ha overflow:hidden) */
.caw .caw-hd { display: flex; align-items: center; gap: 0.75rem; padding: 0.1875rem; }
.caw .caw-ico {
    flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--cw); background: rgba(var(--cw-rgb), 0.14); border: 1px solid rgba(var(--cw-rgb), 0.28);
}
.caw .caw-tit {
    flex: 1; min-width: 0; margin: 0;
    font-size: 1.02rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text-primary);
}
.caw .caw-cnt { font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.caw .caw-add {
    flex-shrink: 0; width: 2.25rem; height: 2.25rem; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-lg); border: 1px solid rgba(var(--cw-rgb), 0.45);
    background: rgba(var(--cw-rgb), 0.06); color: var(--cw);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.caw .caw-add:hover { background: rgba(var(--cw-rgb), 0.16); border-color: var(--cw); }
.caw .caw-add:focus-visible { outline: none; border-color: var(--cw); box-shadow: 0 0 0 3px rgba(var(--cw-rgb), 0.3); }
.caw .caw-add:active { transform: scale(0.92); }
.caw .caw-add svg { transition: transform 0.2s ease; }
.caw .caw-add:hover svg { transform: rotate(90deg); }
@media (min-width: 768px) { .caw .caw-add { width: 2rem; height: 2rem; } }

/* Sottotitolo (l'ex .ca-hint della sezione), allineato al titolo */
.caw .caw-sub {
    margin: 0.25rem 0 1rem; padding-left: calc(2.25rem + 0.75rem + 0.1875rem);
    font-size: 0.78rem; line-height: 1.45; color: var(--color-text-secondary);
}
.caw .caw-hd + .ca-grid { margin-top: 1rem; }   /* Il tuo sito: niente sottotitolo */

/* Card-riga apribile: filo verticale nel colore della sezione al posto del filo in cima */
.caw .ca-card.ca-acc {
    padding: 0; margin-bottom: 0.625rem;
    transition: border-color var(--cw-dur) var(--cw-ease);
}
.caw .ca-card.ca-acc::before {
    top: 0; bottom: 0; left: 0; right: auto; width: 3px; height: auto;
    background: var(--cw); opacity: 0.85; pointer-events: none;
}
.caw .ca-card.ca-acc.caw-open { border-color: rgba(var(--cw-rgb), 0.5); }   /* solo il bordo: un'ombra esterna la taglierebbe la sezione (overflow:hidden) */
.caw .ca-card.ca-acc { scroll-margin-top: 1rem; }

/* Riga di sintesi: tutta la riga è il bottone; dentro solo testo e icone */
.caw .caw-sum {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.25rem;
    padding: 0.875rem 1rem 0.875rem 1.25rem; margin: 0;
    background: none; border: 0; border-radius: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease;
}
.caw .caw-sum:hover { background-color: rgba(255, 255, 255, 0.03); }
html.light-mode .caw .caw-sum:hover { background-color: rgba(0, 0, 0, 0.03); }
.caw .caw-sum:focus-visible { outline: 2px solid var(--cw); outline-offset: -2px; border-radius: 18px; }
.caw .caw-sum * { pointer-events: none; }
.caw .caw-sum__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.caw .caw-sum__tit {
    font-size: 0.92rem; font-weight: 700; line-height: 1.25; color: var(--color-text-primary);
    overflow-wrap: anywhere;
}
.caw .caw-sum__sub { font-size: 0.75rem; line-height: 1.3; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.caw .caw-sum__sub[hidden] { display: none; }
.caw .caw-sum__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.caw .caw-sum__chips:empty { display: none; }
.caw .caw-sum__chips .ca-chip { text-transform: none; letter-spacing: 0; padding: 0.2rem 0.6rem; white-space: nowrap; }
.caw .ca-chip.caw-chip--rev { background: rgba(251, 191, 36, 0.12); color: var(--color-warning); border-color: rgba(251, 191, 36, 0.35); }
.caw .ca-chip.caw-chip--new { background: rgba(74, 222, 128, 0.12); color: var(--color-success); border-color: rgba(74, 222, 128, 0.35); }
.caw .caw-sum__chev { flex-shrink: 0; color: var(--color-text-muted); transition: transform var(--cw-dur) var(--cw-ease), color 0.2s ease; }
.caw .caw-open > .caw-sum .caw-sum__chev { transform: rotate(180deg); color: var(--cw); }

/* Corpo: apertura e chiusura animate */
.caw .caw-body {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows var(--cw-dur) var(--cw-ease), visibility 0s linear var(--cw-dur);
}
.caw .caw-open > .caw-body {
    grid-template-rows: 1fr; visibility: inherit;
    transition: grid-template-rows var(--cw-dur) var(--cw-ease), visibility 0s;
}
.caw .caw-inner {
    overflow: hidden; min-height: 0; padding: 0 1rem 0 1.25rem;
    opacity: 0; transform: translateY(-0.25rem);
    transition: opacity var(--cw-dur) var(--cw-ease), transform var(--cw-dur) var(--cw-ease);
}
.caw .caw-open > .caw-body > .caw-inner { opacity: 1; transform: none; }
/* divisore fra sintesi e campi, respiro in fondo (dentro l'altezza animata) */
.caw .caw-inner::before { content: ''; display: block; height: 1px; margin: 0 0 1.25rem; background: var(--color-divider); }
.caw .caw-inner::after { content: ''; display: block; height: 1rem; }
@media (min-width: 768px) {
    .caw .caw-sum { padding: 1rem 1.25rem 1rem 1.5rem; }
    .caw .caw-inner { padding: 0 1.25rem 0 1.5rem; }
}

/* «Elimina …» in fondo alla card aperta: testuale, rosso, al centro */
.caw .caw-foot { display: flex; justify-content: center; padding-top: 0.25rem; }
.caw .caw-del {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.5rem 0.875rem; cursor: pointer;
    border: 1px solid transparent; border-radius: var(--radius-full); background: none;
    font-family: inherit; font-size: 0.8rem; font-weight: 700; color: var(--color-error);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.caw .caw-del:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
.caw .caw-del:focus-visible { outline: 2px solid var(--color-error); outline-offset: 2px; }

/* Campi che non escono dalla card su telefono: i campi data hanno una larghezza minima propria (iOS Safari);
   senza aspetto nativo restano alti e allineati come gli altri .ca-inp. Select e campi lunghi: mai oltre la colonna. */
.caw .ca-two > .ca-field { min-width: 0; }
/* Telefono (sotto il desktop di .caw, che parte da min-width 768px): le coppie affiancate (.ca-two: flex, gap 10px) diventano
   una colonna, un campo per riga a tutta larghezza; lo spazio fra i campi resta il margin-bottom di .ca-field (24px in
   .ca-flat), quindi niente gap. Password e Provider non vengono più tagliati. */
@media (max-width: 767px) {
    .caw .ca-two { flex-direction: column; gap: 0; }
    .caw .ca-two > .ca-field { flex: none; width: 100%; }
}
.caw .ca-inp { min-width: 0; max-width: 100%; }
/* Campo data con la stessa metrica di .ca-inp (altezza 46px, bordo 1px, padding 0 14px): testo centrato in verticale con
   line-height = altezza interna (44px) su iOS Safari (::-webkit-date-and-time-value) e Chrome (::-webkit-datetime-edit);
   il calendario nativo resta (tocco su iOS, icona su Chrome). */
.caw input.ca-inp[type="date"] {
    display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
    -webkit-appearance: none; appearance: none; text-align: left;
    height: 46px; padding: 0 14px; line-height: 44px;
}
.caw input.ca-inp[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; line-height: 44px; min-height: 44px; }
.caw input.ca-inp[type="date"]::-webkit-datetime-edit { padding: 0; line-height: 44px; }
.caw input.ca-inp[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.caw .caw-sum__chips .ca-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Riquadro Intestatario nella card dominio: scelta, poi codice fiscale e documenti (pannelli .caw-fold, caWebInt/caWebIntVis) */
.caw .caw-int {
    margin: 0 0 1rem; padding: 0.875rem 0.875rem 0.125rem; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
}
html.light-mode .caw .caw-int { background: rgba(0, 0, 0, 0.025); border-color: rgba(0, 0, 0, 0.06); }
.caw .caw-int__tit, .caw .caw-int__sub {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}
.caw .caw-int__tit { color: var(--cw); }
.caw .caw-int .ca-hint { margin: 0 0 1rem; }
/* Avviso (documenti già caricati, intestatario non indicato): ambra tenue, informativo, non un errore */
.caw .caw-warn {
    display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 1rem; padding: 0.625rem 0.75rem;
    border-radius: var(--radius-lg); background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.25);
    font-size: 0.78rem; font-weight: 500; line-height: 1.45; color: var(--color-text-primary);
}
.caw .caw-warn svg { flex-shrink: 0; margin-top: 0.1rem; color: var(--color-warning); }
html.light-mode .caw .caw-warn { background: rgba(180, 83, 9, 0.06); border-color: rgba(180, 83, 9, 0.22); }
/* Pannello apribile: griglia 0fr ↔ 1fr come le card; visibility hidden solo a fine chiusura (fuori dal giro del Tab).
   Il padding laterale con margine negativo lascia spazio all'anello di focus dei campi (overflow:hidden). */
.caw .caw-fold {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows var(--cw-dur) var(--cw-ease), visibility 0s linear var(--cw-dur);
}
.caw .caw-fold.caw-fold--on {
    grid-template-rows: 1fr; visibility: inherit;
    transition: grid-template-rows var(--cw-dur) var(--cw-ease), visibility 0s;
}
.caw .caw-fold__in {
    overflow: hidden; min-height: 0; padding: 0 3px; margin: 0 -3px;
    opacity: 0; transition: opacity var(--cw-dur) var(--cw-ease);
}
.caw .caw-fold--on > .caw-fold__in { opacity: 1; }

/* Password di un accesso: campo type="text" (niente gestori di password), caratteri nascosti solo graficamente di
   partenza; l'occhio dentro il campo a destra (caPwdEye) alterna caw-pwd--show. Le due icone si alternano con aria-pressed.
   -webkit-text-security: Chrome/Edge 1, Safari 3, Safari iOS 1, Firefox 114 (MDN browser-compat-data). */
.caw .caw-pwd { position: relative; }
.caw .caw-pwd > .ca-inp { padding-right: 3rem; -webkit-text-security: disc; text-security: disc; }
.caw .caw-pwd.caw-pwd--show > .ca-inp { -webkit-text-security: none; text-security: none; }
.caw .caw-pwd > .ca-inp::-ms-reveal { display: none; }
.caw .caw-eye {
    position: absolute; top: 50%; right: 0.25rem; transform: translateY(-50%);
    width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--color-text-muted); -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.caw .caw-eye:hover { color: var(--cw); background: rgba(var(--cw-rgb), 0.1); }
.caw .caw-eye:focus-visible { outline: 2px solid var(--cw); outline-offset: -2px; color: var(--cw); }
.caw .caw-eye[aria-pressed="true"] { color: var(--cw); }
.caw .caw-eye .caw-eye__off, .caw .caw-eye[aria-pressed="true"] .caw-eye__on { display: none; }
.caw .caw-eye[aria-pressed="true"] .caw-eye__off { display: block; }
.caw .ca-field:has(> .caw-pwd > .ca-inp:focus) > label { color: var(--color-accent-primary); transition: color 0.15s ease; }   /* come gli altri campi */
/* Browser senza la proprietà (es. Firefox prima della 114): password in chiaro (P8: rileggibile), niente occhio inutile.
   Dopo le regole di .caw-eye, così il display:none vince. */
@supports not (-webkit-text-security: disc) {
    .caw .caw-eye { display: none; }
    .caw .caw-pwd > .ca-inp { padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .caw .caw-eye { transition: none; } }

/* Riapertura dopo un ricaricamento (caWebBack): niente animazione finché le card non sono aperte */
.caw.caw-now .ca-card.ca-acc, .caw.caw-now .caw-body, .caw.caw-now .caw-inner, .caw.caw-now .caw-sum__chev { transition: none; }

@media (prefers-reduced-motion: reduce) {
    .caw .caw-add, .caw .caw-add svg, .caw .ca-card.ca-acc, .caw .caw-sum, .caw .caw-sum__chev,
    .caw .caw-body, .caw .caw-open > .caw-body, .caw .caw-inner, .caw .caw-del,
    .caw .caw-fold, .caw .caw-fold.caw-fold--on, .caw .caw-fold__in { transition: none; }
}

/* ============================================
   Finestra di eliminazione (caAskDel, clieAnagr.js · markup #caDelOv in index.php) — tutte le sezioni Dati.
   z-index subito sopra #confirmOverlay (9600), sotto il loading overlay (9995).
   Mobile: foglio dal basso · da 600px: centrata, sale e scala leggermente. Chiusa: visibility hidden a fine transizione.
   ============================================ */
.cad-ov {
    position: fixed; inset: 0; z-index: 9610; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(5, 5, 8, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.28s;
}
.cad-ov.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.28s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s; }
.cad-box {
    position: relative; width: 100%; box-sizing: border-box; text-align: center;
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.07), rgba(239, 68, 68, 0) 8rem), var(--color-bg-secondary);
    border: 1px solid var(--color-border); border-bottom: 0; border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -0.75rem 3rem rgba(0, 0, 0, 0.45);
    padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1);
}
.cad-ov.is-open .cad-box { transform: none; }
.cad-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 0.875rem;
    border-radius: 50%; color: var(--color-error);
    background: rgba(239, 68, 68, 0.12); box-shadow: 0 0 0 0.375rem rgba(239, 68, 68, 0.06);
}
.cad-tit { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text-primary); }
.cad-nome {
    display: inline-block; max-width: 100%; margin: 0 0 0.625rem; padding: 0.3rem 0.75rem; box-sizing: border-box;
    border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--color-border);
    font-size: 0.86rem; font-weight: 700; color: var(--color-text-primary); overflow-wrap: anywhere;
}
html.light-mode .cad-nome { background: rgba(0, 0, 0, 0.04); }
.cad-nome[hidden], .cad-nota[hidden] { display: none; }
.cad-nota { margin: 0 0 1.25rem; font-size: 0.84rem; line-height: 1.45; color: var(--color-text-secondary); }
.cad-act { display: flex; gap: 0.625rem; }
.cad-btn {
    flex: 1; height: 3rem; padding: 0 1.25rem; border-radius: var(--radius-full); cursor: pointer;
    font-family: inherit; font-size: 0.9rem; font-weight: 700;
    transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}
.cad-btn:active { transform: scale(0.98); }
.cad-btn--no { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border); }
.cad-btn--no:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--color-text-muted); }
html.light-mode .cad-btn--no:hover { background: rgba(0, 0, 0, 0.04); }
.cad-btn--si { background: var(--color-error); color: #fff; border: 1px solid var(--color-error); box-shadow: 0 0.375rem 1.125rem rgba(239, 68, 68, 0.3); }
.cad-btn--si:hover { filter: brightness(1.08); }
.cad-btn:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }
.cad-btn--si:focus-visible { outline-color: var(--color-error); }
html.light-mode .cad-box { box-shadow: 0 -0.5rem 2rem rgba(0, 0, 0, 0.12); }
@media (min-width: 600px) {
    .cad-ov { align-items: center; padding: 1.5rem; }
    .cad-box {
        max-width: 25rem; border-bottom: 1px solid var(--color-border); border-radius: 1.5rem;
        padding: 1.75rem 1.5rem 1.5rem; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
        transform: translateY(0.75rem) scale(0.96); opacity: 0;
        transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.28s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .cad-ov.is-open .cad-box { opacity: 1; }
    html.light-mode .cad-box { box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.15); }
}
@media (prefers-reduced-motion: reduce) {
    .cad-ov, .cad-ov.is-open, .cad-box, .cad-btn { transition: none; }
}
/* Finestra aperta: la pagina sotto non scorre (classe su <html> messa e tolta da caAskDel) */
html.cad-lock, html.cad-lock body { overflow: hidden; overscroll-behavior: none; }