/* visite-embed.css — componenti della vista Visite dentro la dashboard.
   Solo classi .vz-* (nessun reset globale, nessun override su body): sicuro da
   caricare in welcome.html. Stile scuro/arancio coerente col brand. */
:root {
  --vz-surf:#101012; --vz-surf2:#17171b; --vz-line:rgba(255,255,255,.10);
  --vz-text:#f5f5f7; --vz-dim:#a1a1a8; --vz-faint:#6e6e73;
  --vz-acc:#ff6b00; --vz-ok:#34d399; --vz-no:#f87171; --vz-warn:#fbbf24;
}
.vz-sub { color:var(--vz-dim); font-size:15px; margin:0 0 22px; }
.vz-sec-title { font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--vz-faint); margin:26px 0 12px; }
.vz-card { background:var(--vz-surf); border:1px solid var(--vz-line); border-radius:16px; padding:16px; margin-bottom:12px; }
.vz-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.vz-title { font-size:16px; font-weight:700; color:var(--vz-text); }
.vz-when { color:var(--vz-dim); font-size:13px; margin-top:3px; text-transform:capitalize; }
.vz-who { color:var(--vz-faint); font-size:12px; margin-top:8px; }
.vz-badge { flex:none; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.vz-req { background:rgba(251,191,36,.14); color:var(--vz-warn); }
.vz-ok  { background:rgba(52,211,153,.14); color:var(--vz-ok); }
.vz-no  { background:rgba(248,113,113,.14); color:var(--vz-no); }
.vz-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.vz-btn { border:1px solid var(--vz-line); background:var(--vz-surf2); color:var(--vz-text);
  font-size:14px; font-weight:700; padding:9px 16px; border-radius:999px; cursor:pointer; }
.vz-btn:active { transform:scale(.98); }
.vz-confirm { background:var(--vz-acc); border-color:var(--vz-acc); color:#0a0a0a; }
.vz-decline { color:var(--vz-no); }
.vz-cal { color:var(--vz-acc); }
.vz-empty { color:var(--vz-faint); font-size:14px; padding:18px; border:1px dashed var(--vz-line); border-radius:14px; text-align:center; }
.vz-state { padding:48px 18px; text-align:center; color:var(--vz-dim); }
.vz-state a { color:var(--vz-acc); font-weight:700; text-decoration:none; }
.vz-sub-link { display:flex; align-items:center; gap:8px; margin:8px 0 18px; flex-wrap:wrap; }
.vz-sub-link span { color:var(--vz-faint); font-size:13px; }
.vz-sub-link a { color:var(--vz-acc); font-weight:700; font-size:13px; text-decoration:none; }
.vz-sub-link.vz-synced span { color:var(--vz-ok); font-weight:700; }
.vz-host { background:#101012; border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:26px; margin:0 0 18px; }
.vz-host-head { text-align:center; margin-bottom:18px; }
.vz-host-title { font-size:18px; font-weight:600; letter-spacing:-.2px; margin:0 0 6px; color:#f5f5f7; }
.vz-host-hint { font-size:14px; color:#a1a1a8; margin:0; line-height:1.5; }
.vz-host-cta { display:flex; width:fit-content; max-width:100%; margin:0 auto; align-items:center; justify-content:center; gap:9px; background:#ff6b00; color:#1a1206; font-weight:700; font-size:14px; height:44px; padding:0 26px; border-radius:12px; text-decoration:none; }
.vz-host-cta:hover { filter:brightness(1.06); }
.vz-host-cta svg { display:block; }
.vz-host-or { display:flex; align-items:center; gap:14px; margin:18px 2px; color:#6e6e73; font-size:12px; }
.vz-host-or::before, .vz-host-or::after { content:""; flex:1; height:1px; background:rgba(255,255,255,.08); }
.vz-host-grid { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.vz-field { display:flex; flex-direction:column; gap:6px; flex:1 1 108px; min-width:92px; }
.vz-field--prop { flex:2 1 180px; }
.vz-field > span { font-size:12px; font-weight:500; color:#8e8e93; }
.vz-host-in { width:100%; height:42px; background:#1a1a1e; border:1px solid rgba(255,255,255,.1); color:#f5f5f7; border-radius:11px; padding:0 12px; font-size:14px; font-family:inherit; color-scheme:dark; box-sizing:border-box; }
.vz-host-in:hover { border-color:rgba(255,255,255,.18); }
.vz-host-in:focus { outline:none; border-color:#ff6b00; box-shadow:0 0 0 3px rgba(255,107,0,.16); }
select.vz-host-in { -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; cursor:pointer; }
.vz-host-pub { flex:0 0 auto; height:42px; padding:0 22px; background:#26262b; border:1px solid rgba(255,255,255,.12); color:#f5f5f7; font-weight:700; font-size:14px; border-radius:11px; cursor:pointer; }
.vz-host-pub:hover { background:#303036; }
.vz-host-list { margin-top:18px; }
.vz-host-w { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 2px; border-top:1px solid rgba(255,255,255,.06); }
.vz-host-w:first-child { border-top:none; }
.vz-host-w-when { font-size:14px; color:#f5f5f7; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vz-host-w-pill { font-size:11px; font-weight:600; color:#a1a1a8; background:#1a1a1e; border:1px solid rgba(255,255,255,.08); padding:3px 9px; border-radius:999px; }
.vz-host-del { background:none; border:none; color:#8e8e93; font-size:13px; font-weight:600; cursor:pointer; padding:6px 8px; border-radius:8px; }
.vz-host-del:hover { color:#ff6b6b; background:rgba(248,113,113,.1); }
.vz-host-empty { color:#6e6e73; font-size:13px; padding:14px 2px; }

/* Sync calendario: pulsanti provider con logo vero */
.vz-sync { margin:8px 0 22px; }
.vz-sync-title { font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--vz-faint); margin:0 0 10px; }
.vz-sync-providers { display:flex; flex-wrap:wrap; gap:10px; }
.vz-prov { display:inline-flex; align-items:center; gap:9px; text-decoration:none; background:var(--vz-surf2); border:1px solid var(--vz-line); border-radius:12px; padding:9px 15px; color:var(--vz-text); font-size:14px; font-weight:600; }
.vz-prov:hover { background:#1d1d22; border-color:rgba(255,255,255,.22); }
.vz-prov-logo { display:inline-flex; align-items:center; }
.vz-prov-logo svg { width:20px; height:20px; display:block; }
.vz-prov.is-synced { border-color:rgba(52,211,153,.45); }
.vz-prov-synced { display:inline-flex; align-items:center; }
.vz-prov-synced svg { display:block; }
.vz-prov-static { cursor:default; }
.vz-prov-static:hover { background:var(--vz-surf2); border-color:rgba(52,211,153,.45); }
/* De-sincronizza: a-capo forzato (flex-item full width) + conferma inline, niente popup nativo */
.vz-desync-wrap { flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:2px; }
.vz-desync { background:none; border:none; color:var(--vz-faint); font-size:13px; font-weight:600; cursor:pointer; padding:6px 6px; border-radius:8px; }
.vz-desync:hover { color:var(--vz-no); background:rgba(248,113,113,.08); }
.vz-desync-q { color:var(--vz-dim); font-size:13px; }
.vz-desync-yes { color:var(--vz-no); font-weight:800; }
.vz-desync-no { color:var(--vz-text); }
.pz-day-h { font-size:13px; font-weight:700; color:var(--vz-dim); margin:14px 0 6px; text-transform:capitalize; }
/* Sezione Sicurezza (Dati personali) */
.sec-grid { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.sec-row { display:flex; align-items:center; gap:10px; font-size:14px; }
.sec-label { color:var(--vz-dim); min-width:90px; }
.sec-val { color:var(--vz-text); flex:1; word-break:break-all; }
.sec-badge { font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.sec-ok { background:rgba(52,211,153,.14); color:var(--vz-ok); }
.sec-no { background:rgba(251,191,36,.14); color:var(--vz-warn); }
.sec-note { font-size:12px; color:var(--vz-faint); margin:6px 0 0; }
.sec-h3 { font-size:15px; font-weight:700; color:var(--vz-text); margin:22px 0 10px; }
.sec-form { display:flex; flex-direction:column; gap:8px; max-width:380px; }
.sec-in { background:var(--vz-surf2); border:1px solid var(--vz-line); color:var(--vz-text); border-radius:10px; padding:10px 12px; font-size:14px; }
.sec-hint { font-size:12px; color:var(--vz-faint); margin:0 0 10px; max-width:520px; }
.sec-msg { font-size:13px; color:var(--vz-dim); margin:6px 0 0; min-height:16px; }