/* ==========================================================================
   LA PORTA: /entra e /nuova-password.
   Queste regole stavano in area.css, quando la schermata d'accesso viveva
   dentro /area.html ed era solo del cliente. Ora la porta e' una per tutti —
   bagnanti, bagnini, hotel, amministratori — e ha un foglio suo: lasciarle
   nel foglio dell'area del cliente avrebbe fatto sembrare la porta una parte
   dell'area, che e' esattamente cio' che si e' smesso di fare.
   Il mare e la sabbia li mette scena.css sul body; la testata e il marchio
   stanno in base.css. Qui c'e' solo la disposizione e il modulo.
   ========================================================================== */
.ent-testa { position: relative; z-index: 2; color: #fff; }

/* Alta quanto la finestra meno la testata, contenuto al centro: cosi' la
   scena arriva in fondo allo schermo sia col modulo corto (entrare) sia con
   quello lungo (registrarsi), e la differenza di altezza fra i due non
   sposta niente. */
.ent-accesso {
    position: relative;
    min-height: calc(100vh - 62px);
    display: grid; align-content: center;
    padding: 1.6rem var(--fianco) 7rem;
}
.ent-inner {
    position: relative; z-index: 2;
    max-width: var(--colonna); margin: 0 auto;
    display: grid; gap: 2.4rem; align-items: center;
    grid-template-columns: minmax(0, 1fr) 420px;
}
.ent-invito { color: #fff; }
.ent-invito h1 {
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-weight: 700;
    font-size: clamp(1.8rem, 4.2vw, 2.7rem); line-height: 1.1; margin: 0 0 .7rem;
    text-shadow: 0 2px 22px rgba(4, 20, 30, .35);
}
.ent-invito > p { font-size: 1rem; line-height: 1.6; opacity: .92; margin: 0 0 1.5rem; max-width: 44ch; }
.ent-punti { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; max-width: 46ch; }
.ent-punti li { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem; line-height: 1.45; }
.ent-punti .bi {
    flex: none; font-size: .95rem; color: #fff;
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 10px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
}
/* Chi lavora in spiaggia non ha bisogno di essere convinto: gli serve il
   modulo. Una riga sola, in fondo, per dire che e' la porta giusta anche
   per lui. */
.ent-lavoro {
    /* Il filetto non e' decorazione: senza, questa riga si legge come il
       quarto punto dell'elenco, e invece parla a un'altra persona. */
    margin: 1.4rem 0 0; padding-top: 1.1rem; max-width: 46ch;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .8);
}

/* Sotto gli 880px la scena non regge due colonne: il modulo passa sopra e
   l'invito lo segue, perche' chi torna sa gia' perche' e' qui. */
@media (max-width: 880px) {
    /* Da telefono la scena non puo' essere alta quanto la finestra: il
       modulo di registrazione da solo la riempie, e forzarla farebbe
       comparire una barriera vuota prima dei campi. */
    .ent-accesso { min-height: 0; padding-bottom: 7rem; }
    .ent-inner { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
    .ent-invito { order: 2; }
    .ent-card { order: 1; }
}

/* Il modulo nella forma dei campi di B (la ricerca della home, la data
   della vetrina): etichetta sopra, campo alto 48 col bordo di 1.5px, le due
   schede come i segmenti di Faro e non come pillole. E il testo dei campi a
   16px: sotto, l'iPhone ingrandisce la pagina appena si tocca il campo, e
   qui si tocca per primo. */
.ent-card {
    max-width: 420px; margin: 0; background: #fff;
    border: 1px solid var(--f-linea); border-radius: 16px;
    padding: 22px 24px 20px;
    box-shadow: 0 18px 50px rgba(6, 26, 38, .28);
}
.ent-card h2 {
    font-family: var(--f-titoli); font-weight: 700; letter-spacing: -.01em;
    font-size: 22px; margin: 0 0 14px; color: var(--f-notte);
}
.ent-due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ent-tabs {
    display: flex; gap: 4px; margin-bottom: 8px;
    background: var(--f-bruma); border-radius: 10px; padding: 4px;
}
.ent-tab {
    flex: 1; min-height: 40px; border: 0; background: transparent; border-radius: 8px;
    padding: 0 10px; font: inherit; font-size: 15px; font-weight: 700;
    color: var(--f-grigio); cursor: pointer;
}
.ent-tab.attivo { background: #fff; color: var(--f-notte); box-shadow: 0 1px 3px rgba(15, 36, 51, .14); }
.ent-card label {
    display: block; font-size: 14px; font-weight: 700;
    color: var(--f-inchiostro); margin: 12px 0 6px;
}
.ent-card label .opz { font-weight: 400; color: var(--f-grigio); }
.ent-card input:not([type=checkbox]):not([type=radio]) {
    /* L'esclusione non e' un dettaglio: senza, questa regola prendeva anche
       le spunte dei consensi e le allargava al 100% del riquadro, con la
       casella centrata SOPRA la sua etichetta invece che accanto. */
    width: 100%; min-height: 48px; font: inherit; font-size: 16px; padding: 0 14px;
    border: 1.5px solid var(--f-linea-forte); border-radius: 10px;
    color: var(--f-inchiostro); background: #fff;
}
.ent-card input:not([type=checkbox]):not([type=radio]):focus {
    outline: none; border-color: var(--f-mare); box-shadow: 0 0 0 3px rgba(31, 122, 148, .2);
}
.ent-card .pub-btn { min-height: 48px; font-size: 16px; }
.ent-errore { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--f-rosso); }
.ent-nota { font-size: 13px; color: var(--f-grigio); margin: 12px 0 0; line-height: 1.45; }
.ent-mt { margin-top: 16px; }

/* "Password dimenticata?" sta SOTTO il bottone e non accanto al campo: di
   fianco alla password la si legge mentre si scrive, e si clicca per
   sbaglio invece di provare quella che si ricorda. */
.ent-scordata {
    display: flex; justify-content: center; margin-top: .6rem;
}
.ent-scordata button {
    min-height: 40px; border: 0; background: none; padding: 0 8px; font: inherit; font-size: 14px;
    font-weight: 700; color: var(--f-mare); text-decoration: underline; cursor: pointer;
}
/* "Entra con un codice" (G5): la seconda porta, sotto la prima */
.ent-codice { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--f-linea-2); }

/* ─── LA SCELTA ─────────────────────────────────────────────────────────
   Compare solo quando le stesse credenziali aprono tutte e due le porte
   (un gestore che prenota anche da cliente). E' l'unico momento in cui si
   chiede alla persona chi e', e si chiede DOPO la password: a quel punto
   non e' un modo per indovinare chi ha un account, e' una domanda a cui
   solo lei puo' rispondere. */
.ent-scelta { display: grid; gap: .5rem; }
.ent-opzione {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
    text-align: left; font: inherit; cursor: pointer;
    background: #fff; border: 1.5px solid var(--f-linea-forte); border-radius: 10px;
    padding: 10px 14px;
}
.ent-opzione:hover { border-color: var(--f-notte); }
.ent-opzione .bi { font-size: 22px; color: var(--f-mare); flex: none; }
.ent-opzione span { display: grid; line-height: 1.3; min-width: 0; }
.ent-opzione strong { font-size: 16px; color: var(--f-inchiostro); }
.ent-opzione em { font-style: normal; font-size: 14px; color: var(--f-grigio); }

/* ─── L'ESITO (link mandato, password rifatta) ─────────────────────────── */
.ent-esito { font-size: .88rem; line-height: 1.5; color: var(--testo); margin: 0; }
.ent-esito .bi { color: #2e7d52; font-size: 1.4rem; display: block; margin-bottom: .4rem; }
/* Un link scaduto non e' un errore di chi lo apre: niente rosso, e nemmeno
   il verde di quando e' andata bene. */
.ent-esito.ko .bi { color: var(--muto); }

/* ─── LE SPUNTE FACOLTATIVE NEL MODULO DI REGISTRAZIONE ────────────────── */
/* Quattro consensi facoltativi non possono costare mezzo schermo: erano
   quattro riquadri con bordo e imbottitura, e il modulo di registrazione
   finiva sotto la piega. Ora sono righe, separate da un filetto — il testo
   e' lo stesso, l'informativa non si accorcia per far stare la pagina. */
.ac-consensi {
    display: grid; margin-top: .65rem;
    border: 1px solid var(--bordo); border-radius: 10px; padding: .05rem .55rem .35rem;
}
/* .ent-card label vale (0,1,1) e questa (0,1,0): senza il .ent-card davanti,
   il "display: block" dell'etichetta batteva il flex e la casella finiva
   SOPRA il proprio testo invece che accanto. Stessa storia per il margine e
   il colore, che arrivavano dalla regola delle etichette. */
.ent-card .ac-consenso {
    display: flex; align-items: flex-start; gap: .5rem; cursor: pointer;
    padding: .42rem 0; margin: 0; color: var(--testo); font-weight: 400;
}
.ac-consenso + .ac-consenso { border-top: 1px solid #f1ece2; }
.ent-card .ac-consenso input {
    margin: .15rem 0 0; flex: 0 0 auto; width: 15px; height: 15px;
    accent-color: var(--blu-chiaro);
}
.ac-consenso > span { display: grid; line-height: 1.3; }
.ac-consenso strong { font-size: .78rem; font-weight: 600; color: var(--testo); }
.ac-consenso > span > span { font-size: .71rem; color: var(--muto); }
.ac-nota {
    font-size: .7rem; color: var(--muto); margin: .35rem 0 .1rem;
    line-height: 1.35; text-align: center;
}
.ac-nota a { display: block; margin-top: .1rem; }