/* dgCard - login e recupero password (13/10/2026)
   Estende login.css con gli stessi colori: giallo #f9ae0b, rosa #e50043, testo chiaro su fondo scuro. */

/* Campo password con occhio (e asterisco) dentro il campo, a destra */
.campo-pwd { position: relative; margin: 0 0 1% 0; }
.campo-pwd input { width: calc(100% - 82px); padding-right: 65px; margin: 0; }
.campo-pwd input.obbl { background-position: right 10px center !important; } /* asterisco in fondo, come negli altri campi */
.campo-pwd input.obbl + .occhio { right: 26px; } /* occhio a sinistra dell'asterisco */
.campo-pwd .occhio { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.campo-pwd .occhio img { width: 26px; height: auto; opacity: .5; transition: opacity .2s; }
.campo-pwd .occhio:hover img, .campo-pwd .occhio.attivo img { opacity: 1; }

/* Testi su fondo scuro */
#main .testo { color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.5; margin: 5px 0 0; }
#main .testo b { color: #ffffff; }

/* Messaggi: riquadro scuro, testo bianco, bordo giallo (ok) o rosa (errore) */
#main .avviso { background: rgba(0,0,0,.35); color: #ffffff; border-left: 4px solid #f9ae0b; border-radius: 5px; padding: 15px 20px; font-size: 16px; line-height: 1.5; margin: 20px 0 10px; }
#main .avviso.errore { border-left-color: #e50043; }
#main .avviso b { color: #f9ae0b; }
#main .avviso.errore b { color: #ff5a8a; }

/* Requisiti password: diventano gialli quando sono rispettati */
#main .requisiti { list-style: none; padding: 0; margin: 15px 0 0; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.9; }
#main .requisiti li { position: relative; padding-left: 24px; } /* rientro: le righe che vanno a capo restano allineate al testo */
#main .requisiti li::before { content: "○"; position: absolute; left: 0; color: rgba(255,255,255,.4); }
#main .requisiti li.ok { color: #f9ae0b; }
#main .requisiti li.ok::before { content: "●"; color: #f9ae0b; }

/* Il pulsante Login (float) resta dentro il riquadro anche su telefono */
#main form::after { content: ""; display: block; clear: both; }

/* Riga azioni: link a sinistra, pulsante giallo a destra (come nel login) */
.azioni { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 25px; margin-bottom: 2%; } /* stesso margine del pulsante Login */
.azioni .puls_esci_chiudi { float: none; margin: 0; }
.azioni > :last-child { margin-left: auto; } /* il pulsante resta a destra anche quando va a capo */
/* spazio per il footer fisso in fondo alla pagina */
#body_login { padding-bottom: 90px; }
a.btn-dg { display: inline-block; background: #f9ae0b; color: #2a313c; font-weight: bold; font-size: 140%; border-radius: 100px; padding: 1% 5%; text-decoration: none; cursor: pointer; transition: all .2s; }
a.btn-dg:hover, a.btn-dg:focus { background: rgba(0,0,0,.4); color: #ffffff; }

@media all and (max-width: 810px) {
    #main .testo, #main .avviso { font-size: 20px; }
    #main .requisiti { font-size: 18px; }
    a.btn-dg { font-size: 22px; }
    .azioni { margin-bottom: 6%; } /* come input[type=submit] su telefono */
    .campo-pwd .occhio img { width: 32px; }
}