/* Meet Radar per PC — stili (un solo file: la Content-Security-Policy non permette stili scritti dentro la pagina). */
:root {
  --sfondo: #0e1419; --pannello: #151d24; --pannello2: #1c2630; --bordo: #2a3642; --testo: #e8eef3; --tenue: #9aa8b5;
  --arancio: #ef7d22; --giallo: #f5b400; --blu: #3d8bfd; --verde: #34c27a; --rosso: #e5534b;
  --mio: #1f4f80; --suo: #24303b; --raggio: 12px; --ombra: 0 6px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --sfondo: #f2f4f7; --pannello: #ffffff; --pannello2: #f6f8fa; --bordo: #d7dde3; --testo: #17202a; --tenue: #5b6875;
    --mio: #d6e8ff; --suo: #eef1f4; --ombra: 0 6px 24px rgba(0, 0, 0, .12);
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--sfondo); color: var(--testo); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; }
[hidden] { display: none !important; }
a { color: var(--blu); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; color: var(--tenue); margin-top: 1em; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=search], input[type=date], input[type=time], select, textarea {
  background: var(--pannello2); border: 1px solid var(--bordo); border-radius: 8px; padding: .5em .65em; width: 100%;
}
textarea { resize: vertical; }
:focus-visible { outline: 2px solid var(--arancio); outline-offset: 2px; }

.btn { background: var(--pannello2); border: 1px solid var(--bordo); border-radius: 999px; padding: .5em 1em; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--tenue); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primario { background: var(--arancio); border-color: var(--arancio); color: #111; font-weight: 600; }
.btn.pericolo { color: var(--rosso); border-color: color-mix(in srgb, var(--rosso) 50%, var(--bordo)); }
.btn.piccolo { padding: .3em .7em; font-size: .88rem; }
.btn.tondo { width: 2.3em; height: 2.3em; padding: 0; border-radius: 50%; }
.btn.attivo { background: var(--arancio); color: #111; }

.nota { color: var(--tenue); font-size: .88rem; }
.nota.piccola { font-size: .8rem; }
.vuoto, .attesa { color: var(--tenue); }
.errore { color: var(--rosso); }
.avviso-fisso { background: color-mix(in srgb, var(--giallo) 18%, transparent); border: 1px solid var(--giallo); border-radius: 8px; padding: .6em .8em; }
.senza-js { padding: 2em; text-align: center; }
.banner-emulatore { background: #8a1c1c; color: #fff; text-align: center; font-weight: 700; padding: .25em; position: sticky; top: 0; z-index: 50; }

/* ---------------------------------------------------------------- collegamento */
.centro { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.scheda-collega { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 18px; box-shadow: var(--ombra); padding: 2rem; max-width: 900px; width: 100%; }
.scheda-collega h1 { font-size: 1.7rem; }
.sottotitolo { color: var(--tenue); margin-top: 0; }
.logo img { display: block; margin-bottom: .6rem; }
.collega { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; margin: 1.5rem 0; }
.passi { font-size: 1.05rem; padding-left: 1.3em; }
.passi li { margin: .55em 0; }
.codice-qr { text-align: center; }
#qr { background: #fff; border-radius: 10px; width: 232px; height: 232px; image-rendering: pixelated; }
.codice { font: 700 2rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; margin: .4em 0 .2em; }
.stato { color: var(--tenue); min-height: 1.4em; }
.ricorda { display: flex; gap: .5em; align-items: flex-start; margin: .5em 0; }
@media (max-width: 720px) { .collega { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- struttura */
.app { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; height: 100vh; }
.testata { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; background: var(--pannello); border-bottom: 1px solid var(--bordo); }
.marchio { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: 1.1rem; }
.chi-sono { display: flex; align-items: center; gap: .5em; margin-left: auto; }
.chi-sono .rid { color: var(--arancio); font-weight: 700; font-size: .9rem; }
.comandi { display: flex; gap: .5em; align-items: center; }
.comandi select { width: auto; }
.nav { background: var(--pannello); border-right: 1px solid var(--bordo); padding: .6rem; display: flex; flex-direction: column; gap: .2rem; overflow-y: auto; }
.voce-nav { display: flex; align-items: center; gap: .7em; background: none; border: 0; border-radius: 10px; padding: .65em .8em; cursor: pointer; text-align: left; position: relative; }
.voce-nav:hover { background: var(--pannello2); }
.voce-nav[aria-current=true] { background: color-mix(in srgb, var(--arancio) 20%, transparent); color: var(--testo); font-weight: 600; }
.voce-nav .icona { font-size: 1.25rem; width: 1.6em; text-align: center; }
.pallino { background: var(--rosso); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .5em; min-width: 1.5em; text-align: center; font-weight: 700; }
.voce-nav .pallino { margin-left: auto; }
.principale { overflow: auto; padding: 1rem; outline: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .nav { grid-row: 3; flex-direction: row; border-right: 0; border-top: 1px solid var(--bordo); overflow-x: auto; }
  .voce-nav .testo-nav { display: none; }
  .chi-sono .rid { display: none; }
}

.colonne { display: grid; gap: 1rem; height: 100%; }
.colonne.due { grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.4fr); }
.colonne.tre { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
.colonne.chat { grid-template-columns: 320px 1fr; height: calc(100vh - 90px); }
.colonna { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem; overflow: auto; min-width: 0; }
.colonna.sola { max-width: 760px; }
@media (max-width: 1100px) { .colonne.tre, .colonne.due { grid-template-columns: 1fr; height: auto; } }
@media (max-width: 760px) { .colonne.chat { grid-template-columns: 1fr; } }

.riga { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.riga > * { flex: 1 1 140px; }
.modulo { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.2rem; }
.campo { display: flex; flex-direction: column; gap: .3em; font-size: .9rem; color: var(--tenue); }
.campo > input, .campo > select, .campo > textarea { color: var(--testo); }
.scelta { display: flex; gap: .5em; align-items: center; margin: .3em 0; cursor: pointer; }
.scelta.consenso { align-items: flex-start; font-size: .88rem; }
.scelte { display: flex; gap: .35em; flex-wrap: wrap; }
.scelte.vis { background: var(--pannello2); border-radius: 999px; padding: .2em; width: fit-content; }
.scelta-vis { display: inline-flex; align-items: center; gap: .3em; padding: .3em .75em; border-radius: 999px; cursor: pointer; font-size: .88rem; }
.scelta-vis:has(input:checked) { background: var(--arancio); color: #111; font-weight: 600; }
.scelta-vis:has(input:disabled) { opacity: .45; cursor: default; }
.scelta-vis input { position: absolute; opacity: 0; pointer-events: none; }
.filtri { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.filtri select { width: auto; }
.proposte { list-style: none; margin: 0; padding: 0; }
.proposte button { width: 100%; text-align: left; background: var(--pannello2); border: 1px solid var(--bordo); border-radius: 8px; padding: .45em .6em; margin-top: .2em; cursor: pointer; }

/* ---------------------------------------------------------------- persone */
.avatar { border-radius: 50%; object-fit: cover; flex: none; background: var(--pannello2); }
.avatar.vuoto { display: inline-block; text-align: center; font-weight: 700; color: var(--arancio); background: color-mix(in srgb, var(--arancio) 15%, var(--pannello2)); }
.elenco-persone { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.voce-persona { display: flex; align-items: center; gap: .6rem; padding: .4rem; border-radius: 10px; flex-wrap: wrap; }
.voce-persona:hover { background: var(--pannello2); }
.voce-persona .azioni { margin-left: auto; display: flex; gap: .3rem; flex-wrap: wrap; }
.persona-mini { display: flex; align-items: center; gap: .6rem; background: none; border: 0; cursor: pointer; padding: 0; text-align: left; }
.persona-mini .nome { font-weight: 600; display: block; }
.sotto { color: var(--tenue); font-size: .85rem; display: block; }
.persona-testa { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem; }
.rid { color: var(--arancio); font-weight: 700; }
.rid.grande { font-size: 1.6rem; margin: 0; }
.bio { white-space: pre-wrap; }
.azioni { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.riquadro { background: var(--pannello2); border: 1px solid var(--bordo); border-radius: 10px; padding: .7rem .9rem; margin: .6rem 0; }
.riquadro p { margin: .2em 0; }
.frase { font-style: italic; }
details.bloccati { margin-top: 1rem; }

/* ---------------------------------------------------------------- chat */
.elenco-chat { list-style: none; margin: .6rem 0 0; padding: 0; }
.voce-chat { display: flex; align-items: center; gap: .7rem; width: 100%; background: none; border: 0; border-radius: 10px; padding: .55rem; cursor: pointer; text-align: left; }
.voce-chat:hover { background: var(--pannello2); }
.voce-chat.attiva { background: color-mix(in srgb, var(--arancio) 18%, transparent); }
.testo-voce { flex: 1; min-width: 0; }
.testo-voce .nome { display: block; font-weight: 600; }
.anteprima { display: block; color: var(--tenue); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-chat.non-letta .anteprima { color: var(--testo); font-weight: 600; }
.dx { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.ora { color: var(--tenue); font-size: .75rem; }
.conversazione { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.conversazione .vuoto { margin: auto; }
.testa-chat { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--bordo); }
.testa-chat .spazio { flex: 1; }
.messaggi { list-style: none; margin: 0; padding: 1rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.msg { max-width: 70%; padding: .45rem .7rem .3rem; border-radius: 14px; background: var(--suo); align-self: flex-start; }
.msg.mio { background: var(--mio); align-self: flex-end; }
.testo-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .ora { display: block; text-align: right; }
.giorno { align-self: center; color: var(--tenue); font-size: .78rem; margin: .6rem 0; }
.visto { margin: 0 1rem; text-align: right; color: var(--blu); font-size: .8rem; min-height: 1.2em; }
.composizione { display: flex; gap: .6rem; padding: .6rem .9rem; border-top: 1px solid var(--bordo); align-items: flex-end; }
.composizione textarea { flex: 1; max-height: 40vh; }
.invio { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.conta { color: var(--tenue); font-size: .75rem; }
.conversazione > .nota { margin: 0 .9rem .6rem; }

/* ---------------------------------------------------------------- viaggi */
.elenco-viaggi { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.viaggio { background: var(--pannello2); border: 1px solid var(--bordo); border-radius: 10px; padding: .6rem .8rem; display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
.scheda-viaggio { flex: 1 1 260px; }
.scheda-viaggio p { margin: .15em 0; }
.scheda-viaggio .meta { font-weight: 700; }
.quando { color: var(--tenue); }
.etichette { display: flex; gap: .3rem; flex-wrap: wrap; }
.etichetta { background: color-mix(in srgb, var(--blu) 20%, transparent); border-radius: 999px; padding: .05em .6em; font-size: .78rem; }
.nota-viaggio { white-space: pre-wrap; font-size: .9rem; }
.gruppo h3 { color: var(--giallo); }

/* ---------------------------------------------------------------- radar e mappa */
.radar { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; height: calc(100vh - 90px); }
.radar .lato { overflow: auto; }
@media (max-width: 900px) { .radar { grid-template-columns: 1fr; grid-template-rows: auto 60vh; height: auto; } }
.mappa { position: relative; overflow: hidden; border-radius: var(--raggio); border: 1px solid var(--bordo); background: #aac8d8; touch-action: none; cursor: grab; user-select: none; }
.mappa.tira { cursor: grabbing; }
.mappa-tessere, .mappa-segni { position: absolute; inset: 0; }
.mappa-tessere img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; }
.segnaposto { position: absolute; left: 0; top: 0; margin: -18px 0 0 -18px; min-width: 36px; height: 36px; border-radius: 18px; border: 2px solid #fff; background: var(--arancio); color: #111; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); padding: 0 .4em; }
.segnaposto.amico { background: var(--giallo); }
.segnaposto.live { background: var(--blu); color: #fff; }
.mappa-comandi { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: .3rem; }
.mappa-comandi .btn { background: var(--pannello); font-size: 1.2rem; }
.mappa-attribuzione { position: absolute; right: 0; bottom: 0; background: rgba(255, 255, 255, .85); color: #333; font-size: .72rem; padding: 0 .4em; }
.mappa-grande { min-height: 400px; }

/* ---------------------------------------------------------------- foto e video */
.griglia { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.casella { position: relative; width: 100%; aspect-ratio: 1; border: 0; border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer; background: var(--pannello2); }
.casella img { width: 100%; height: 100%; object-fit: cover; display: block; }
.casella .senza { font-size: 2rem; }
.segno-video { position: absolute; right: 6px; top: 6px; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 6px; padding: 0 .35em; font-size: .8rem; }
.casella .stato { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .7); color: #fff; font-size: .75rem; padding: .15em; }
.casella .stato.rejected { background: rgba(160, 30, 30, .85); }
.vis-media { position: absolute; left: 6px; top: 6px; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 6px; padding: 0 .35em; font-size: .72rem; }
.visore { display: flex; flex-direction: column; gap: .6rem; }
.media-grande { max-width: 100%; max-height: 65vh; border-radius: 10px; align-self: center; background: #000; }
.didascalia { font-weight: 600; }
progress { width: 100%; }

/* ---------------------------------------------------------------- profilo e dispositivi */
.righe-vis { list-style: none; padding: 0; margin: .5rem 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.righe-vis li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.righe-vis .chiave { font-weight: 600; }
.righe-vis.fisse .valore { color: var(--tenue); }
.elenco-dispositivi { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.elenco-dispositivi li { background: var(--pannello2); border: 1px solid var(--bordo); border-radius: 10px; padding: .6rem .8rem; }
.elenco-dispositivi li.questo { border-color: var(--arancio); }
.elenco-dispositivi .nome { font-weight: 600; display: block; }

/* ---------------------------------------------------------------- finestre e avvisi */
dialog.finestra { background: var(--pannello); color: var(--testo); border: 1px solid var(--bordo); border-radius: 16px; padding: 0; width: min(560px, 94vw); box-shadow: var(--ombra); }
dialog.finestra.larga { width: min(860px, 96vw); }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.testa-finestra { padding: 1rem 1.2rem 0; }
.corpo-finestra { padding: .4rem 1.2rem; max-height: 72vh; overflow: auto; }
.piede-finestra { display: flex; gap: .5rem; justify-content: flex-end; padding: .8rem 1.2rem 1rem; flex-wrap: wrap; }
.elenco-scelte { display: flex; flex-direction: column; gap: .2rem; margin: .6rem 0; }
.avvisi { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4rem; z-index: 100; width: min(520px, 92vw); }
.avviso { background: var(--pannello); border: 1px solid var(--bordo); border-left: 4px solid var(--blu); border-radius: 10px; padding: .6rem .9rem; box-shadow: var(--ombra); }
.avviso.ok { border-left-color: var(--verde); }
.avviso.errore { border-left-color: var(--rosso); }

/* ---------------------------------------------------------------- editor */
.editor { display: flex; flex-direction: column; gap: .7rem; align-items: center; }
.editor-comandi { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.editor-tela { max-width: 100%; touch-action: none; cursor: move; border-radius: 6px; }
.raddrizza { display: flex; align-items: center; gap: .4em; color: var(--tenue); }

/* famiglia:inizio */
.famiglia{--f-bg:#fff;--f-ink:#14212E;--f-mut:#4A5A68;--f-line:#D9E2E1;--f-chip:#EEF3F2;--f-acc:#0B7E73;max-width:1180px;margin:28px auto 0;padding:18px;background:var(--f-bg);color:var(--f-ink);border:1px solid var(--f-line);border-radius:18px;font-family:'Nunito Sans',system-ui,Arial,sans-serif;line-height:1.45;box-sizing:border-box}
.famiglia *{box-sizing:border-box}
.famiglia h2{font-family:'Rubik','Nunito Sans',system-ui,Arial,sans-serif;font-size:20px;margin:0 0 4px;padding:0;border:0;text-align:center;color:var(--f-ink)}
.famiglia .f-lingue{margin:0 0 12px;color:var(--f-mut);font-size:13px;text-align:center}
.famiglia ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:10px}
.famiglia li{margin:0;padding:12px 14px;border:1px solid var(--f-line);border-radius:14px;background:var(--f-bg)}
.famiglia li.f-qui{border-color:var(--f-acc);border-width:2px}
.famiglia .f-nome{display:block;font-weight:800;font-size:16px;color:var(--f-ink);text-decoration:none}
.famiglia a.f-nome:hover{color:var(--f-acc)}
.famiglia .f-qui-t{font-weight:600;font-size:12px;color:var(--f-acc)}
.famiglia .f-frase{margin:2px 0 8px;font-size:13.5px;color:var(--f-mut)}
.famiglia .f-link{display:flex;flex-wrap:wrap;gap:6px}
.famiglia .f-link a,.famiglia .f-link span{font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--f-chip);color:var(--f-ink);text-decoration:none;white-space:nowrap}
.famiglia .f-link a:hover{color:var(--f-acc);text-decoration:underline}
.famiglia .f-link span{font-weight:600;color:var(--f-mut)}
@media print{.famiglia{display:none}}
@media (prefers-color-scheme: dark){.famiglia{--f-bg:#1e2227;--f-ink:#e8eaed;--f-mut:#a0a8b0;--f-line:#33393f;--f-chip:#2a3036;--f-acc:#3fc1a1}}
/* famiglia:fine */