/* Calendari esterni (abbonamenti ICS) — solo token di app.css + colori utente via --c */
.cal .cal-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.cal .cal-row:first-child { border-top: 0; padding-top: 2px; }
.cal .cal-row.off .cal-name, .cal .cal-row.off .cal-dot { opacity: .45; }
.cal .cal-row .grow { cursor: pointer; }
.cal .cal-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.cal .cal-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cal .cal-av { width: 20px; height: 20px; font-size: 11px; margin-left: 0; }
.cal .cal-err { color: var(--danger); }
.cal .cal-sync { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.cal .cal-sync svg { width: 18px; height: 18px; }
.cal .cal-sync:disabled { opacity: .4; }
.cal .cal-sync.spin svg { animation: cal-spin 1s linear infinite; }
@keyframes cal-spin { to { transform: rotate(360deg); } }

.cal .cal-empty { text-align: center; padding: 14px 6px 10px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.cal .cal-empty .cal-ico { font-size: 34px; margin-bottom: 4px; }
.cal .cal-empty .tiny { max-width: 420px; line-height: 1.45; }

.cal .cal-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 11px; border-radius: 12px; border: 1.5px dashed var(--line2); color: var(--fg2); font-weight: 600; font-size: 14px; }
.cal .cal-add svg { width: 18px; height: 18px; }
.cal .cal-add:hover { border-color: var(--accent); color: var(--accent); }

.cal .cal-form { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.cal .cal-form .actions { display: flex; gap: 8px; margin-top: 14px; }
.cal .cal-form .actions .btn { flex: 1; }
.cal .cal-form .actions .btn.danger { flex: 0 0 auto; }
.cal .cal-form .chip { cursor: pointer; }
.cal .cal-colors { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal .cal-sw { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid var(--bg2); box-shadow: 0 0 0 1.5px var(--line2); cursor: pointer; transition: transform .12s; }
.cal .cal-sw.on { box-shadow: 0 0 0 2.5px var(--fg); transform: scale(1.08); }
.cal .cal-sw.custom { position: relative; overflow: hidden; background: conic-gradient(from 0deg, var(--c), var(--bg3), var(--c)); }
.cal .cal-sw.custom input { position: absolute; inset: -8px; width: 200%; height: 200%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
@media (min-width: 900px) { .cal .cal-form .actions { justify-content: flex-end; } .cal .cal-form .actions .btn { flex: 0 0 auto; min-width: 120px; } }