/* public/porta.css (case-a-forli)
   VERSION: 1.2.0 (da culla attrezzi/accesso-google/porta.css 1.0.0; in piu' intro, nota e firma della porta)
   Novita' 1.2.0: «Entra con la tua email» sotto il pulsante di Google (porta.js 1.3.0).
   Novita' 1.1.0: i colori di stile.css (chiari o scuri secondo il telefono), la rotellina dentro il pulsante mentre si
   aspetta Google, i messaggi larghi quanto il pulsante e la firma come pillola fissa in basso a destra.
   Se la pagina ha una testata, nascondila con: body.in-porta #testata{display:none} */
body.in-porta{--porta-sfondo:var(--bg,#f7f5f0);--porta-testo:var(--ink,#1d1d1b);--porta-piano:var(--muted,#6b665e);background:var(--porta-sfondo);color:var(--porta-testo)}
.porta{min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px);display:grid;place-items:center;padding:24px 20px 56px}
.porta-scheda{max-width:520px;text-align:center}
.porta-marchio{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--porta-piano);margin-bottom:14px}
.porta-scheda h2{margin:0 0 8px;font-size:22px;font-weight:650;letter-spacing:-.01em;color:var(--porta-testo)}
.porta-scheda p{margin:0 0 22px;color:var(--porta-piano);line-height:1.55;font-size:15px}
/* il pulsante decide la larghezza: messaggi e pulsante di riserva non vanno oltre (width:0 + min-width:100%) */
.porta-azione{display:inline-grid;justify-items:stretch;gap:12px}
.bottone-google{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:240px;padding:12px 22px;border-radius:99px;font-weight:600;font-size:15px;
  background:var(--porta-testo);color:var(--porta-sfondo);border:none;cursor:pointer;font-family:inherit;box-shadow:var(--ombra,0 1px 3px rgba(0,0,0,.15));transition:transform .1s,box-shadow .15s}
.bottone-google:hover:not(:disabled){box-shadow:0 4px 14px rgba(0,0,0,.18)}
.bottone-google:active:not(:disabled){transform:translateY(1px)}
.bottone-google:disabled{opacity:.55;cursor:default}
.bottone-google.in-attesa{opacity:1;cursor:progress}
.porta-g{display:inline-flex;width:17px;height:17px;align-items:center;justify-content:center}
.bottone-google.in-attesa .porta-g svg{display:none}
.bottone-google.in-attesa .porta-g::after{content:"";width:15px;height:15px;box-sizing:border-box;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.85;animation:porta-gira .75s linear infinite}
@keyframes porta-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bottone-google.in-attesa .porta-g::after{animation-duration:2s}}
.porta-msg,.porta-riserva,.porta-nota{width:0;min-width:100%}
.porta-msg:empty,.porta-riserva:empty{display:none}
.porta-riserva{display:flex;justify-content:center;overflow:hidden}
.porta-avviso{padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.4;text-align:left;overflow-wrap:anywhere;background:color-mix(in srgb,var(--accent,#1f5f8a) 12%,transparent);color:var(--porta-testo)}
.porta-avviso.male{background:var(--errbg,#fbe9e7);color:var(--err,#a33)}
.porta-scheda p.porta-sotto{font-size:16px;color:var(--porta-testo);margin-bottom:14px}
.porta-intro{text-align:left;margin:0 auto 22px;max-width:440px;font-size:14px;line-height:1.55;color:var(--porta-piano)}
.porta-intro p{text-align:left;margin:0 0 12px}
.porta-intro ul{margin:0;padding:0;list-style:none}
.porta-intro li{position:relative;padding-left:22px;margin:6px 0;color:var(--porta-testo)}
.porta-intro li::before{content:"\2713";position:absolute;left:2px;top:0;color:#1a9850;font-weight:700}
.porta-scheda p.porta-nota{margin:0;font-size:12px;color:var(--porta-piano)}
.porta-firma{margin:0}
/* «Entra con la tua email» (porta.js 1.3.0) */
.porta-email{margin:18px auto 0;width:100%;max-width:320px;box-sizing:border-box}
.porta-apri-email{font:inherit;font-size:14px;background:none;border:0;color:var(--porta-piano);cursor:pointer;padding:6px 4px}
.porta-apri-email b{color:var(--accent,#1f5f8a);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.porta-form-email{display:grid;gap:8px;text-align:left}
.porta-form-email[hidden]{display:none}
.porta-form-email label{font-size:13px;color:var(--porta-piano)}
.porta-riga-email{display:grid;gap:8px}
.porta-riga-email input{width:100%;box-sizing:border-box;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--rule,#ddd);border-radius:12px;background:var(--card,#fff);color:var(--porta-testo)}
.porta-riga-email input:focus{outline:0;border-color:var(--accent,#1f5f8a);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#1f5f8a) 25%,transparent)}
.porta-riga-email button{font:inherit;font-size:14px;font-weight:600;padding:10px 14px;border:0;border-radius:99px;background:var(--porta-testo);color:var(--porta-sfondo);cursor:pointer;white-space:nowrap}
.porta-riga-email button:disabled{opacity:.6;cursor:default}
.porta-msg-email:empty{display:none}