/*
 * Telefono: il foglio «Installa l'app» (public/js/installazione-app.js).
 *
 * Caricato da resources/views/includes/app-installabile.blade.php con
 * media="(max-width: 767.98px)": sul computer e sul tablet non si applica.
 * Le regole valgono SOLO per #prevInstallaFoglio, un elemento che non esiste
 * finche' non si tocca «Installa» sul telefono: quando il foglio si apre, lo
 * script aggiunge lo stesso file per tutte le larghezze, cosi' il foglio resta
 * in ordine anche girando il telefono (in orizzontale si superano i 768 px).
 * Notte (come la barra) e giorno (html[data-tema="giorno"]).
 * Misure del telefono: testi da 14 px in su, bersagli da 44 px in su.
 * Non si chiama telefono-*.css perche' non sta in includes/telefono-css
 * (quella cartella di fogli e' solo per alcuni layout; questo serve in tutti,
 * anche per chi non e' entrato, e lo usa anche lo script per le altre larghezze).
 */

/* ---- Il foglio: in basso, largo quanto lo schermo ----------------------- */
#prevInstallaFoglio{position:fixed;inset:auto 0 0 0;margin:0;padding:0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  width:100%;max-width:none;max-height:100%;border:0;background:transparent;color:#E2E8F0;overflow:visible;
  font-family:inherit;text-align:left;box-sizing:border-box;}
#prevInstallaFoglio::backdrop{background:rgba(2,6,23,.58);}
#prevInstallaFoglio:not([open]){display:none;}
/* Browser senza <dialog> (iPhone prima di iOS 15.4): lo stesso foglio, sopra tutto. */
#prevInstallaFoglio.pia-senza-modale{display:block;z-index:2147483000;}
#prevInstallaFoglio *,#prevInstallaFoglio *::before,#prevInstallaFoglio *::after{box-sizing:border-box;}
#prevInstallaFoglio .pia-pannello{max-width:520px;margin:0 auto;padding:14px 16px 16px;border-radius:20px;
  background:#1E293B;border:1px solid rgba(148,163,184,.24);box-shadow:0 -10px 40px rgba(2,6,23,.45);
  max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;
  animation:pia-entra .22s ease-out;}
/* Con la freccia sotto (o sopra) il pannello lascia il posto alla freccia. */
#prevInstallaFoglio.pia-con-freccia .pia-pannello{max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);}
@keyframes pia-entra{from{transform:translateY(28px);opacity:0;}to{transform:none;opacity:1;}}

/* iPad: il tasto Condividi e' in alto a destra, il foglio va in alto. */
#prevInstallaFoglio[data-posizione="alto"]{inset:0 0 auto 0;padding:calc(8px + env(safe-area-inset-top, 0px)) 10px 0;}
#prevInstallaFoglio[open][data-posizione="alto"]{display:flex;flex-direction:column-reverse;}
#prevInstallaFoglio[data-posizione="alto"] .pia-pannello{width:100%;animation-name:pia-scende;}
@keyframes pia-scende{from{transform:translateY(-28px);opacity:0;}to{transform:none;opacity:1;}}

/* ---- Testa: simbolo, titolo, X ------------------------------------------ */
#prevInstallaFoglio .pia-testa{display:flex;align-items:center;gap:12px;}
#prevInstallaFoglio .pia-testa img{width:40px;height:40px;border-radius:11px;flex-shrink:0;}
#prevInstallaFoglio .pia-testa h2{flex:1;min-width:0;margin:0;font-size:18px;font-weight:800;line-height:1.3;color:#F1F5F9;letter-spacing:0;}
#prevInstallaFoglio .pia-chiudi{width:44px;height:44px;flex-shrink:0;margin-right:-6px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid rgba(148,163,184,.28);background:transparent;color:#CBD5E1;
  display:inline-flex;align-items:center;justify-content:center;}
#prevInstallaFoglio .pia-chiudi svg{width:18px;height:18px;}

/* ---- Contenuti ------------------------------------------------------------ */
#prevInstallaFoglio .pia-corpo{display:none;margin-top:12px;}
#prevInstallaFoglio .pia-corpo.e-attivo{display:block;}
#prevInstallaFoglio .pia-corpo p{margin:0 0 12px;font-size:15px;font-weight:400;line-height:1.55;color:#CBD5E1;}
#prevInstallaFoglio .pia-corpo b{font-weight:700;color:#F1F5F9;}
#prevInstallaFoglio .pia-corpo .pia-nota{font-size:14px;color:#94A3B8;}
#prevInstallaFoglio .pia-corpo .pia-nota:empty{display:none;}
#prevInstallaFoglio .pia-corpo [hidden]{display:none !important;}
#prevInstallaFoglio .pia-passi{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px;}
#prevInstallaFoglio .pia-passi li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.16);font-size:15px;line-height:1.55;color:#CBD5E1;}
#prevInstallaFoglio .pia-num{width:26px;height:26px;margin-top:1px;border-radius:999px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#0F1929;background:#22D3EE;}
#prevInstallaFoglio .pia-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:28px;height:28px;margin:-3px 1px 0;border-radius:8px;background:rgba(34,211,238,.14);color:#22D3EE;}
#prevInstallaFoglio .pia-ico svg{width:18px;height:18px;}
#prevInstallaFoglio .pia-app{display:inline-flex;flex-direction:column;align-items:center;gap:5px;margin:0 0 14px;font-size:14px;color:#E2E8F0;}
#prevInstallaFoglio .pia-app img{width:52px;height:52px;border-radius:13px;box-shadow:0 4px 12px rgba(2,6,23,.35);}

/* «Preparo l'installazione…»: il cerchio che gira */
#prevInstallaFoglio .pia-attesa{display:flex;align-items:center;gap:14px;margin:4px 0 14px;}
#prevInstallaFoglio .pia-attesa p{margin:0;}
#prevInstallaFoglio .pia-giro{width:30px;height:30px;flex-shrink:0;border-radius:999px;
  border:3px solid rgba(34,211,238,.22);border-top-color:#22D3EE;animation:pia-gira .9s linear infinite;}
@keyframes pia-gira{to{transform:rotate(360deg);}}

/* ---- Pulsanti ------------------------------------------------------------- */
#prevInstallaFoglio .pia-azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
#prevInstallaFoglio .pia-azioni.pia-colonna{flex-direction:column;}
#prevInstallaFoglio .pia-azioni + .pia-nota{margin:12px 0 0;}
#prevInstallaFoglio .pia-primario,
#prevInstallaFoglio .pia-secondario{flex:1 1 0;min-width:0;min-height:48px;padding:10px 16px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none;
  font-family:inherit;font-size:16px;font-weight:700;line-height:1.25;}
#prevInstallaFoglio .pia-azioni.pia-colonna .pia-primario,
#prevInstallaFoglio .pia-azioni.pia-colonna .pia-secondario{flex:0 0 auto;width:100%;}
#prevInstallaFoglio .pia-primario svg,
#prevInstallaFoglio .pia-secondario svg{width:20px;height:20px;flex-shrink:0;}
#prevInstallaFoglio .pia-primario{border:0;color:#FFFFFF;background:linear-gradient(135deg,#0E7490,#2563EB);box-shadow:0 8px 20px rgba(14,116,144,.28);}
#prevInstallaFoglio .pia-primario:hover,#prevInstallaFoglio .pia-primario:focus{color:#FFFFFF;text-decoration:none;}
#prevInstallaFoglio .pia-secondario{border:1px solid rgba(56,189,248,.45);background:transparent;color:#7DD3FC;}
#prevInstallaFoglio button:focus-visible,#prevInstallaFoglio a:focus-visible{outline:3px solid #38BDF8;outline-offset:2px;}

/* ---- La freccia verso Condividi (iPhone e iPad con Safari) ---------------- */
#prevInstallaFoglio .pia-freccia{display:none;}
#prevInstallaFoglio.pia-con-freccia .pia-freccia{display:flex;justify-content:center;padding-top:4px;color:#22D3EE;
  filter:drop-shadow(0 2px 6px rgba(2,6,23,.6));}
/* Velo piu' scuro: la freccia indica la barra di Safari, FUORI dalla pagina,
   e non deve sembrare che indichi i pulsanti in fondo alla pagina. */
#prevInstallaFoglio.pia-con-freccia::backdrop{background:linear-gradient(to bottom, rgba(2,6,23,.78), rgba(2,6,23,.96) 80%);}
#prevInstallaFoglio.pia-con-freccia[data-posizione="alto"]::backdrop{background:linear-gradient(to top, rgba(2,6,23,.78), rgba(2,6,23,.96) 80%);}
#prevInstallaFoglio .pia-freccia svg{width:34px;height:42px;animation:pia-indica 1.3s ease-in-out infinite;}
@keyframes pia-indica{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
#prevInstallaFoglio.pia-con-freccia[data-posizione="alto"] .pia-freccia{justify-content:flex-end;padding:0 18px 4px 0;}
#prevInstallaFoglio[data-posizione="alto"] .pia-freccia svg{transform:rotate(180deg);animation-name:pia-indica-su;}
@keyframes pia-indica-su{0%,100%{transform:rotate(180deg) translateY(0);}50%{transform:rotate(180deg) translateY(7px);}}

@media (prefers-reduced-motion: reduce){
  #prevInstallaFoglio .pia-pannello,#prevInstallaFoglio .pia-freccia svg{animation:none;}
  #prevInstallaFoglio .pia-giro{animation-duration:2.4s;}
}

/* ---- Tema giorno ---------------------------------------------------------- */
html[data-tema="giorno"] #prevInstallaFoglio::backdrop{background:rgba(15,23,42,.45);}
html[data-tema="giorno"] #prevInstallaFoglio.pia-con-freccia::backdrop{background:linear-gradient(to bottom, rgba(15,23,42,.7), rgba(15,23,42,.94) 80%);}
html[data-tema="giorno"] #prevInstallaFoglio.pia-con-freccia[data-posizione="alto"]::backdrop{background:linear-gradient(to top, rgba(15,23,42,.7), rgba(15,23,42,.94) 80%);}
html[data-tema="giorno"] #prevInstallaFoglio .pia-pannello{background:#FFFFFF;border-color:#C9D3DF;box-shadow:0 -10px 40px rgba(15,23,42,.2);}
html[data-tema="giorno"] #prevInstallaFoglio .pia-testa h2,
html[data-tema="giorno"] #prevInstallaFoglio .pia-corpo b{color:#0F172A;}
html[data-tema="giorno"] #prevInstallaFoglio .pia-corpo p,
html[data-tema="giorno"] #prevInstallaFoglio .pia-passi li{color:#334155;}
html[data-tema="giorno"] #prevInstallaFoglio .pia-passi li{background:#F8FAFC;border-color:#C9D3DF;}
html[data-tema="giorno"] #prevInstallaFoglio .pia-corpo .pia-nota{color:#475569;}
html[data-tema="giorno"] #prevInstallaFoglio .pia-num{background:#0E7490;color:#FFFFFF;}
html[data-tema="giorno"] #prevInstallaFoglio .pia-ico{background:#EAF6F9;color:#0E7490;}
html[data-tema="giorno"] #prevInstallaFoglio .pia-app{color:#1F2937;}
html[data-tema="giorno"] #prevInstallaFoglio .pia-chiudi{border-color:#C9D3DF;color:#475569;}
html[data-tema="giorno"] #prevInstallaFoglio .pia-secondario{border-color:rgba(14,116,144,.45);background:#EAF6F9;color:#0E7490;}
html[data-tema="giorno"] #prevInstallaFoglio .pia-giro{border-color:rgba(14,116,144,.2);border-top-color:#0E7490;}
html[data-tema="giorno"] #prevInstallaFoglio button:focus-visible,
html[data-tema="giorno"] #prevInstallaFoglio a:focus-visible{outline-color:#0E7490;}

/* ---- Le voci «Installa l'app» dei menu, dentro l'app gia' installata --------
   Solo sul telefono (il file puo' essere aggiunto per tutte le larghezze). */
@media (max-width: 767.98px){
  html[data-app-stato="in-app"] [data-installa-app]{display:none !important;}
}