/* FZ Calor – finestra «Scarica l'app» (v1.5.22): stati, passaggi numerati con disegno, scelta del browser.
   I colori vengono dalle variabili di app.css (tema scuro sempre acceso); niente stili nell'HTML (CSP: style-src 'self'). */

dialog.finestra:not([open]) { display: none; }
/* Browser senza <dialog> (iPhone con iOS < 15.4): la finestra si apre comunque, al centro, sopra la pagina */
dialog.finestra.senza-dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: -webkit-fit-content; height: fit-content;
                               max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; z-index: 100;
                               box-shadow: 0 0 0 100vmax rgba(27, 29, 34, .6), 0 40px 80px -20px rgba(27, 29, 34, .5); }
dialog.finestra { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.schede-os { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schede-os button[aria-pressed=true] { background: var(--carta); color: var(--testo); box-shadow: 0 1px 3px rgba(27, 29, 34, .12); }
@media (max-width: 360px) { .schede-os button { padding: 8px 2px; font-size: .9rem; } .finestra-corpo { padding: 18px 16px 20px; } }

/* testata compatta (logo a sinistra, titolo a destra): su un telefono lascia più spazio alla guida */
#dlg-installa .finestra-testa { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 0 14px; padding: 16px 50px 14px 18px; }
#dlg-installa .finestra-testa img { width: 56px; height: 56px; grid-row: 1 / span 2; border-radius: 17px; }
#dlg-installa .finestra-testa h2 { margin: 0; font-size: 1.25rem; }
#dlg-installa .finestra-testa p { font-size: .82rem; line-height: 1.3; }

/* «Ti vedo su iPhone con Chrome»: la persona capisce subito che la guida è quella del suo telefono */
.rilevato { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-weight: 750; font-size: .95rem; }
.rilevato:empty { display: none; }
.rilevato::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(63, 207, 142, .18); }

/* tre stati: nativo (un tocco), attesa (l'evento sta per arrivare), guida (passaggi a mano). Senza script la guida è sempre visibile. */
#dlg-installa .inst-nativo, #dlg-installa .inst-attesa { display: none; }
#dlg-installa[data-stato=nativo] .inst-nativo { display: block; }
#dlg-installa[data-stato=attesa] .inst-attesa { display: flex; }
#dlg-installa[data-stato=nativo] .inst-guida, #dlg-installa[data-stato=attesa] .inst-guida { display: none; }

.inst-nativo .installa-ora { margin-bottom: 10px; }
.inst-nativo .aiuto { margin: 0 0 6px; text-align: center; }
.link-passi { display: block; margin: 8px auto 0; border: 0; background: none; color: var(--testo-tenue); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; padding: 8px; }
.inst-attesa { align-items: center; justify-content: center; gap: 12px; padding: 18px 0; font-weight: 700; }
.giro { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--bordo); border-top-color: var(--fuoco); animation: inst-giro .8s linear infinite; }
@keyframes inst-giro { to { transform: rotate(360deg); } }

.avviso-app span { display: block; margin-top: 4px; }
.avviso-app span b { display: inline; }   /* app.css rende «block» ogni <b> dell'avviso (serve solo al titolo) */
.avviso-app .avviso-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.avviso-app .avviso-azioni .btn { margin-top: 0; }
.avviso-app .avviso-azioni .btn.grande { flex: 1 1 100%; }
.campo-link { width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid #e0c9a0; border-radius: 10px; background: #fff; color: #3a2a0f; font: inherit; font-size: .85rem; }
.avviso-app .il { margin-top: 10px; background: #fffaf0; border-color: #ecd7b0; }
.avviso-app .il-linea { fill: #ecd7b0; }
.copia-nascosta { position: fixed; left: -9999px; top: 0; opacity: 0; pointer-events: none; }

/* scelta del browser (si accende da sola su quello rilevato, ma si può cambiare: Brave, DuckDuckGo… non si riconoscono) */
.chip-browser { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip-browser button { min-height: 40px; border: 1px solid var(--bordo); background: none; color: var(--testo-tenue); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: .85rem; cursor: pointer; }
.chip-browser button[aria-pressed=true] { background: var(--fuoco-chiaro); border-color: var(--fuoco); color: var(--testo); font-weight: 750; }

/* passaggi numerati, ognuno con il suo disegno */
.guida-os { list-style: none; counter-reset: passo; padding: 0; margin: 16px 0 0; display: grid; gap: 18px; font-size: .95rem; line-height: 1.45; }
.guida-os > li { counter-increment: passo; position: relative; padding-left: 40px; }
.guida-os > li::before { content: counter(passo); position: absolute; left: 0; top: -2px; width: 29px; height: 29px; border-radius: 10px; background: linear-gradient(135deg, #e8730a, #d3202a); color: #fff;
                         font-weight: 800; display: grid; place-items: center; }
.guida-os > li.tenue { counter-increment: none; margin-left: 0; padding-left: 0; font-size: .86rem; }   /* app.css dava -20px */
.guida-os > li.tenue::before { content: none; }
.guida-os b { font-weight: 800; }
/* guida Samsung: «Apri in Chrome» e «Copia il link» dentro la voce: respiro sopra e fra i due (senza, a 320-375 px si toccano) */
.guida-os li > .btn.grande { margin: 10px 8px 0 0; }
.guida-os li > .btn.grande ~ .btn { margin-top: 8px; }

/* disegni (SVG): sfondo e linee seguono il tema; il cerchio arancione pulsa dove toccare */
.il { display: block; width: 100%; height: auto; margin-top: 9px; border-radius: 12px; background: var(--sfondo); border: 1px solid var(--bordo); overflow: visible; }
.il text { font: 600 13px/1 "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.il-linea { fill: var(--bordo); }
.il-barra { fill: var(--carta); stroke: var(--bordo); }
.il-riga { fill: var(--sfondo); }
.il-campo { fill: var(--sfondo); stroke: var(--bordo); }
.il-app { fill: var(--bordo); }
.il-ico { color: var(--testo-tenue); }
.il-ico-vivo { color: var(--fuoco); }
.il-t { fill: var(--testo-tenue); }
.il-t-forte { fill: var(--testo); font-weight: 800; }
.il .il-piccolo { font-size: 11px; }
.il-etichetta { fill: var(--fuoco); font-weight: 800; font-size: 14px; }
.il-numero { fill: var(--fuoco); font-weight: 800; font-size: 14px; }
.avviso-app .il-etichetta, .avviso-app .il-numero { fill: #b45309; }   /* arancio più scuro sul fondo crema dell'avviso */
.il-evid-riga { fill: rgba(242, 140, 27, .18); stroke: var(--fuoco); stroke-width: 2; }
.il-acceso { fill: var(--verde); }
.il-pallino { fill: #fff; }
.il-etichetta, .il-numero { paint-order: stroke; }
.senza-installare { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.senza-installare p { margin: 0 0 8px; font-weight: 700; }
.senza-installare p.tenue { margin: 8px 0 0; font-weight: 400; font-size: .85rem; }
.senza-installare .btn { width: 100%; }
.altro-layout { margin-top: 8px; font-size: .86rem; color: var(--testo-tenue); }
.altro-layout summary { cursor: pointer; padding: 4px 0; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.altro-sistema { margin: 12px 0 0; padding: 9px 12px; border: 1px solid var(--fuoco-bordo); border-radius: 12px; background: var(--fuoco-chiaro); font-size: .88rem; font-weight: 700; }
.altro-sistema:empty { display: none; }
/* bersagli di tocco da almeno 40-44 px (anziani, mani grandi) */
#dlg-installa .finestra-testa .chiudi { top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; }
#dlg-installa .btn.piccolo { min-height: 44px; }
#dlg-installa .finestra-testa p { opacity: 1; }
.il-anello { fill: rgba(242, 140, 27, .16); stroke: var(--fuoco); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: il-pulsa 1.5s ease-in-out 4; }   /* pochi cicli: poi resta fermo */
@keyframes il-pulsa { 0%, 100% { transform: scale(1); stroke-opacity: 1; } 50% { transform: scale(1.14); stroke-opacity: .45; } }