/* ==========================================================================
   MODAL DE ACCESO A GALERÍAS (class-pfga-lock.php)
   --------------------------------------------------------------------------
   Estilos específicos del flujo de acceso (datos → código → confirmación).
   El aspecto general de la tarjeta vive en capsule.css; aquí solo lo que es
   propio de este modal. Los pasos se muestran/ocultan con jQuery (.pfga-step).
   ========================================================================== */

/* Los pasos ocultos los maneja JS con display:none inline; esto solo refuerza
   el estado inicial antes de que cargue JS. */
.pfga-step { animation: pfga-fadein 0.25s ease; }

@keyframes pfga-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* El mensaje de estado siempre ocupa su espacio para que los botones
   no "salten" cuando aparece un aviso. */
.pfga-overlay--embed .pfga-msg { margin-bottom: 6px; }

/* Entrada del código: 6 dígitos bien separados y centrados. */
#pfga-codigo,
#pfga-codigo-b {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 10px;
    text-align: center;
    color: #f0f0f0;
    user-select: all;
}

/* Separación entre botones apilados del paso de datos. */
#pfga-btn-ya-tengo,
#pfga-btn-enviar-codigo { margin-top: 4px; }

#pfga-btn-enviar-codigo { margin-top: 10px; }

/* Botón "Volver": ya se estiliza como .pfga-link en capsule.css. */
#pfga-btn-volver { margin-top: 16px; }

/* En pantallas muy bajas (celular horizontal), permitir scroll del modal. */
@media (max-height: 640px) {
    .pfga-overlay--embed {
        align-items: flex-start;
    }
    .pfga-overlay--embed .pfga-card {
        margin: 30px auto;
        aspect-ratio: auto;
    }
}